JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2flex item 2flex item 2flex item 2</div>
  <div class="flex-item">flex item 3</div>
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
  <div class="flex-item">flex item 2flex item 2flex item 2flex item 2</div>
  <div class="flex-item">flex item 3</div>
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
  <div class="flex-item">flex item 2flex item 2flex item 2flex item 2</div>
</div>

CSS

.flex-container {
  //width: auto;
  height: 300px;
  background-color: lightgrey;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: left;
  
  }

.flex-item {
  background-color: cornflowerblue;
  width: 122px;
  margin: 0 10px 10px 0;
  float: left;
  padding: 15px;
}
.flex-wrapper {
  //display: inline-block;
}