How to wrap text while keeping inputs on the same line
<p>I am having problem designing below UI.</p>

<pre><code>[text1] [inputBox1]
[text2] [inputBox2]
[text3] [inputBox3]
</code></pre>

<p>text1, text2, text3 can be variable length. So if length of text increases, there width should increases and input box moves towards right. If the text is much longer, than text wrapping should happen. Someone suggested that I should use flexbox, but I have no idea how to start with it. Can somebody please help me with it?</p>

<p>Basic structure</p>

<pre><code>&lt;div&gt;
    &lt;div&gt;text1&lt;/div&gt;
    &lt;div&gt;inputBox1&lt;/div&gt;
    &lt;div&gt;text2&lt;/div&gt;
    &lt;div&gt;inputBox2&lt;/div&gt;
    &lt;div&gt;text3&lt;/div&gt;
    &lt;div&gt;inputBox3&lt;/div&gt;
    .
    .
    .
    .
&lt;/div&gt;
</code></pre>