двухколонная форма с динамическим числом строк в каждом столбце

Question

Я пытаюсь создать следующую форму, где будет 2 столбца.Каждый столбец может иметь любое количество полей формы, например, левый столбец может иметь только одно поле формы, а правый столбец может иметь также только одно поле формы или левый столбец может иметь два поля формы, а правый столбец может иметь три поля формы и наоборот.

То, как я делаю, не разделяет два столбца.Вот что я сделал

Вот то, что я пытался использовать 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>

Вот дизайн

Answer 1

Во-первых, вам нужно установить width: 100% на тип входа, который вы хотите охватить.В вашем макете контейнер уже занимает всю ширину.

Вы также должны использовать display:flex на вашем input-wrapper и установить

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

, чтобы текст отображался первыми входы во второй строке.

.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>