JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">

  <div class="one">
    <div class="block two"></div>
    <div class="inner">
      <div class="block"></div>
      <div class="block"></div>
    </div>
  </div>
  <div class="one">
    <div class="block two"></div>
    <div class="inner">
      <div class="block"></div>
      <div class="block"></div>
    </div>
  </div>
  <div class="one">
    <div class="block two"></div>
    <div class="inner">
      <div class="block"></div>
      <div class="block"></div>
    </div>
  </div>
  <div class="one">
    <div class="block two"></div>
    <div class="inner">
      <div class="block"></div>
      <div class="block"></div>
    </div>
  </div>

</div>

CSS

.block {
  width: 100px;
  height: 20px;
  border: 1px solid black;
  margin-right: 5px;
  margin-bottom: 4px;
}

.one {
  display: flex;
}

.two {
  height: auto;
}

.parent {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.inner {
  display: flex;
  flex-direction: column;
}