两列形式，每列中有动态行数

Question

I am trying to design the following form where there will be 2 column. Each column can have any number of form field like left column can have only one form field and right column can have also one form field only or left column can have two form field and right column can have three form field and vice versa.

The way i am doing does not separates two columns. Here is what i have done

Here is what i tried using flex

 .row { display: flex; } .input-wrapper { flex: 1; padding-left: 15px; } 

 <div class="row"> <div class="input-wrapper"> <label>Additional Space</label> <select> <option>hello</option> </select> </div> <div class="input-wrapper"> <label>Size</label> <input type="text" placeholder="length" /> </div> <div class="input-wrapper"> <label></label> <input type="text" placeholder="width" /> </div> <div class="input-wrapper"> <label></label> <select> <option>hello</option> </select> </div> </div> <br/><br/><br/><br/><br/> <div class="row"> <div class="input-wrapper"> <label>Additional Space</label> <select> <option>hello</option> </select> </div> <div class="input-wrapper"> <label>Size</label> <input type="text" placeholder="length" /> </div> </div> 

Here is the design

Answer 1

First, you need to set width: 100% to the input type you want to span. In your layout, the container already takes the full width.

You should also use display:flex on your input-wrapper and set

flex-direction: column;
justify-content: flex-end;

In order for the text to be shown first and the inputs on the second line.

 .row { display: flex; } .input-wrapper { flex: 1; padding-left: 15px; display: flex; flex-direction: column; justify-content: flex-end; } select{ width: 100%; } select, input{ border: 1px solid #e1e1e1; padding: 6px; border-radius: 3px; } label{ font-size: 14px; color: #d1d1d1; margin-bottom: 4px; } 

 <div class="row"> <div class="input-wrapper"> <label>Additional Space</label> <select> <option>hello</option> </select> </div> <div class="input-wrapper"> <label>Size</label> <input type="text" placeholder="length" /> </div> <div class="input-wrapper"> <label></label> <input type="text" placeholder="width" /> </div> <div class="input-wrapper"> <label></label> <select> <option>hello</option> </select> </div> </div> <br/><br/><br/><br/><br/> <div class="row"> <div class="input-wrapper"> <label>Additional Space</label> <select> <option>hello</option> </select> </div> <div class="input-wrapper"> <label>Size</label> <input type="text" placeholder="length" /> </div> </div>