CSS/jQuery：レイアウト内の複雑な編集可能なコンテンツ

Question

私はかなり複雑なレイアウトと編集可能なコンテンツを持っています。

Layout

素子全体を100％の幅であり、2つの線/境界が残っているスペースを取るでしょう。

私のレイアウトは、このようになります。テキスト内の数字は編集可能なので、テキストの幅が変わることがあります。誰でもjQueryまたはCSSのスマートなソリューションを持っていますか？私が間違っている場合

Answer 1

誰かが私を修正し、私はフレキシボックスがうまくこれに適応すると仮定します。

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