JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="box">GROUP 1</div>
<div class="box">text text text text text text text text text text text text text text text text</div>
<div class="box"></div>
<div class="box"></div>
<div class="box">GROUP 2</div>
<div class="box"></div>
<div class="box">text text text text text text text text</div>
<div class="box"></div>
<div class="box">GROUP 3</div>
<div class="box"></div>
<div class="box"></div>
<div class="box">text text text text text text text texttext text text text text text text text</div>
<div class="box">GROUP 4</div>
<div class="box">text text text text text text text text</div>
<div class="box"></div>
<div class="box"></div>
</div>
CSS
body {
display: flex;
justify-content: center;
}
.container {
display: flex;
flex-wrap: wrap;
width: 75%;
}
.box {
flex: 1 0 20%;
margin: 0 5px 5px 0;
background-color: lightgreen;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2em;
}