CSS:在没有flexbox的情况下将元素定位在一行中

Question

伙计们需要一些定位元素的帮助。

我需要在一行中将元素 B 紧挨着元素 B，以便元素 B 及其边框底部跨越整个左侧空间，并且元素 A 的宽度事先未知。

我试过在 B 上使用 display: inline-block 但它会弹出到下一行并且只有 display: inline 我不能让它的底部边距跨度到屏幕右侧

随附代码笔:https://codepen.io/bbluszcz/pen/Xyywqx?editors=1100

重要，由于某些原因我不能使用 flexblox

.a {
  display: inline;
  padding: 4px;
}
.b {
    display: inline-block;
/*       display: inline; */
    width: 100%;
    border-bottom: 1px dashed green;
}

<div class="a">  Element A :</div>
<div class="b">  Element B </div>

Answer 1

有几种方法可以做到这一点，最简单的方法之一可能就是使用表格。请注意 white-space: nowrap 或多个单词将换行到下一行。

.a {
    padding: 4px;
    white-space: nowrap;
}
.b {
    width: 100%;
    border-bottom: 1px dashed green;
}
<table>
   <tr>
      <td class="a">  Element A :</td>
      <td class="b">  Element B </td>
   </tr>
</table>