Mukesh Gupta Mukesh Gupta - 3 months ago 7
CSS Question

How to wrap text while keeping inputs on the same line

I am having problem designing below UI.

[text1] [inputBox1]
[text2] [inputBox2]
[text3] [inputBox3]


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?

Basic structure

<div>
<div>text1</div>
<div>inputBox1</div>
<div>text2</div>
<div>inputBox2</div>
<div>text3</div>
<div>inputBox3</div>
.
.
.
.
</div>

Answer

Surround each input and text in a div with class line. Then give each of the divs with the class line display:flex;.

.line{
  display:flex;
}
input{
  margin-left:auto;
}
<div>
  <div class="line">
    <div>This is a lot of repeating pointless text. This is a lot of repeating pointless text.</div>
    <input>
  </div>
  <div class="line">
    <div>This is a lot of repeating pointless text.</div>
    <input>
  </div>
  <div class="line">
    <div>text3</div>
    <input>
  </div>
</div>