Выровняйте элементы с помощью flexbox css

Question

Мне нужно выровнять красные элементы div в одной и той же позиции с разными метками, которые могут занимать несколько строк или одну, но оставить место в синем элементе div, если он содержится в следующем или предыдущем столбце.

как я могу это сделать?

https://codepen.io/aldozumaran/pen/zbWLpb

.main-flex {
  display: flex;
  flex-wrap: wrap;
}
.main-flex .item-flex {
  background: #ccc;
  display: flex;
  flex-direction: column;
  margin: 10px;
  padding: 10px;
  flex: 1 1 45%;
}
.main-flex .item-flex label {
  flex: 1;
  margin-bottom: auto;
}
.main-flex .item-flex .input-flex {
  height: 40px;
  width: 100%;
  background: #f00;
}
.main-flex .item-flex .input-flex-2 {
  height: 40px;
  width: 100%;
  background: #00f;
}

<div class="main-flex ">
  <div class="item-flex bg-white">
    <label for="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid animi aperiam atque consequatur corporis dolor eius </label>
    <div class="input-flex"></div>
  </div>
  <div class="item-flex  bg-white">
    <label for="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid animi aperiam atque consequatur corporis dolor eius </label>
    <div class="input-flex"></div>
    <div class="input-flex-2"></div>
  </div>
  <div class="item-flex bg-white">
    <label for="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid animi aperiam atque consequatur corporis dolor eius Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, animi cum fuga fugit iusto laudantium libero minus molestias obcaecati officiis omnis quam quidem quod sit ut. At quasi rem vitae? </label>
    <div class="input-flex"></div>
    <div class="input-flex-2"></div>
  </div>
  <div class="item-flex bg-white">
    <label for=""> At quasi rem vitae? </label>
    <div class="input-flex"></div>
  </div>
  <div class="item-flex bg-white">
    <label for=""> At quasi rem vitae? </label>
    <div class="input-flex"></div>
  </div>
  <div class="item-flex bg-white">
    <label for=""> At quasi rem vitae? </label>
    <div class="input-flex"></div>
  </div>
</div>

Answer 1

Вы можете рассмотреть нижнее поле красного цвета, которое вы выпрямляете, с отрицательным полем синего цвета.

.main-flex {
  display: flex;
  flex-wrap: wrap;
}
.main-flex .item-flex {
  background: #ccc;
  display: flex;
  flex-direction: column;
  margin: 10px;
  padding: 10px;
  flex: 1 1 45%;
}
.main-flex .item-flex label {
  flex: 1;
  margin-bottom: auto;
}
.main-flex .item-flex .input-flex {
  height: 40px;
  width: 100%;
  background: #f00;
  margin-bottom:40px;
}
.main-flex .item-flex .input-flex-2 {
  margin-top:-40px;
  height: 40px;
  width: 100%;
  background: #00f;
}

<div class="main-flex ">
  <div class="item-flex bg-white">
    <label for="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid animi aperiam atque consequatur corporis dolor eius </label>
    <div class="input-flex"></div>
  </div>
  <div class="item-flex  bg-white">
    <label for="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid animi aperiam atque consequatur corporis dolor eius </label>
    <div class="input-flex"></div>
    <div class="input-flex-2"></div>
  </div>
  <div class="item-flex bg-white">
    <label for="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid animi aperiam atque consequatur corporis dolor eius Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, animi cum fuga fugit iusto laudantium libero minus molestias obcaecati officiis omnis quam quidem quod sit ut. At quasi rem vitae? </label>
    <div class="input-flex"></div>
    <div class="input-flex-2"></div>
  </div>
  <div class="item-flex bg-white">
    <label for=""> At quasi rem vitae? </label>
    <div class="input-flex"></div>
  </div>
  <div class="item-flex bg-white">
    <label for=""> At quasi rem vitae? </label>
    <div class="input-flex"></div>
  </div>
  <div class="item-flex bg-white">
    <label for=""> At quasi rem vitae? </label>
    <div class="input-flex"></div>
  </div>
</div>

Answer 2

Должны ли красные дивы быть гибкими / отзывчивыми?

Один из способов сделать это - оставить там div, но просто убрать цвет:

<div class="main-flex ">
   <div class="item-flex bg-white">
       <label for="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid animi aperiam atque consequatur corporis dolor eius </label>
       <div class="input-flex"></div>
       <div class="input-flex-2" style="background: none"></div>
   </div>
   <div class="item-flex  bg-white">
       <label for="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid animi aperiam atque consequatur corporis dolor eius </label>
       <div class="input-flex"></div>
       <div class="input-flex-2"></div>
  </div>
  <div class="item-flex bg-white">
       <label for="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid animi aperiam atque consequatur corporis dolor eius Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, animi cum fuga fugit iusto laudantium libero minus molestias obcaecati officiis omnis quam quidem quod sit ut. At quasi rem vitae? </label>
       <div class="input-flex"></div>
       <div class="input-flex-2"></div>
  </div>
  <div class="item-flex bg-white">
       <label for=""> At quasi rem vitae? </label>
       <div class="input-flex"></div>
       <div class="input-flex-2" style="background: none"></div>
  </div>

CSS не изменился.