J. Sveum J. Sveum - 1 month ago 9
CSS Question

CSS/jQuery: Complex editable content inside layout

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

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>