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

Question

I have a pretty complex layout and editable content.

My layout looks like this:

Layout

The whole element is 100% width and the two lines/borders will take up the space that remains. The numbers in the text is editable, so the width of the text may change. Anybody have any smart solutions with either jQuery or CSS?

Answer 1

Someone correct me if I'm wrong, but I assume Flexbox will adapt to this just fine:

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

 <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>