JSFiddle - React, Tailwind, and code Playground

by died

HTML

<div class="box" >
  <div class="x">A</div>
  <div class="x">B</div>
  <div class="x">C</div>
  <div class="x">D</div>
  <div class="xx">E</div>
  <div class="x">F</div>
  <div class="x">G</div>
  <div class="x">H</div>    
</div>

CSS

.box {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-content: flex-start;
align-items: baseline;
width:200px;
height:400px;
background-color:AliceBlue ;
    
}
.x{
    width:50px;
    height:50px;
    background-color:Aquamarine;
    order: 0; 
    flex: 0 1 auto; 
}
.xx{
    width:100px;
    height:100px;
    background-color:Chartreuse;
    order: 0; 
    flex: 0 1 auto; 
}