JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box-container">
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
  <div id="box4"></div>
</div>

CSS

#box-container{
  display:flex;
  flex-flow: wrap;
}
#box1{
  background-color:cyan;
  width:50%;
  height:200px;
  order:1
}
#box2{
  background-color:magenta;
  width:50%;
  height:150px;
  order:2;
}
#box3{
  background-color:yellow;
  width:50%;
  height:100px;
  order:3;
}
#box4{
  background-color:black;
  width:50%;
  height:150px;
  order:4;
}

/*#box1,#box2,#box3,#box4{
  width:100%;
}*/