two column form with dynamic number of rows in each column - html

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>