构建Flex ....分隔线

Question

我正在尝试构建下表。无法建立中心键和值之间的分隔符。它应该根据列的宽度增长/缩小。关于如何使用CSS实现此目标的任何想法？

Answer 1

也许可以使用表格：

<table class="tab">
  <tr>
    <td class="wordsleft">First Name:</td>
    <td class="distance"></td>
    <td class="wordsright">Guy</td></tr>
  <tr>
    <td class="wordsleft">Last Name:</td>
    <td></td>
    <td class="wordsright">Bronson</td></tr>
</table>

和CSS：

.tab {
  border-collapse:collapse;
}
.tab tr {
  border-bottom:2px dotted black;
}
.tab .distance {
  width:50px;
}
.tab .wordsleft {
  border-bottom-style:none;
  text-align:left;
}
.tab .wordsright{
  border-bottom-style:none;
  text-align:right;
}

我希望它能起作用