CSS / jQuery：布局中复杂的可编辑内容

Question

我有一个非常复杂的布局和可编辑的内容。

我的布局如下：

Layout

整个元素的宽度为100％，两条线/边框将占用剩余的空间。文本中的数字是可编辑的，因此文本的宽度可能会发生变化。任何人都有jQuery或CSS的智能解决方案吗？

Answer 1

如果我错了，有人会纠正我，但我认为Flexbox会适应这一点：

＆＃13;

＆＃13;

.container {
  display: flex;
}

.line {
  flex-grow: 1;
  height: 2px;
  background: #000;
}

＆＃13;

<div class="container">
  <div class="text">Text</div>
  <div class="line"></div>
  <div class="text">Text</div>
  <div class="line"></div>
  <div class="text">Text</div>
</div>

＆＃13;

＆＃13;

＆＃13;