How to wrap text while keeping inputs on the same line

Question

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>

"text wrapping should happen" You want inputBox to stay on the same line? Do you have any relevant CSS yet? — TylerH, Aug 10 '16 at 15:47
Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. Some images of the intended states would be ideal. — Paulie_D, Aug 10 '16 at 15:49

Wowsk · Accepted Answer · 2016-08-10T18:24:22.490

1

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>

edited Aug 10 '16 at 18:24

answered Aug 10 '16 at 15:51

Wowsk

3,637
2
18
29

Can we vertical align the textboxes ? i.e starting point of input box lies in a line. For that we can move first and third input box in the line of second input box ? – Mukesh Gupta Aug 10 '16 at 17:04
I changed my example. Is this what you wanted? – Wowsk Aug 10 '16 at 18:24

score 1 · Answer 2 · edited May 23 '17 at 12:00

Aisgn class or id to each div to diferentiate between container and child in you css code like this:

 <div id="container">
    <div id="wrapper">
        <div class="textChild">text1</div>
        <div class="inputChild">inputBox1</div>        
    </div>
    .
    .
    .
  </div>

Next, use css to format every div in your container using flexbox model, where #wrapper are your flexbox container with display flex and .textChild and inputChild are your child elements with flex property defined as 1 or something else, you can find usefull example on this answer

How to wrap text while keeping inputs on the same line

2 Answers2