JSFiddle - React, Tailwind, and code Playground

HTML

<div id='container'>
  <div class='box' style="height:70px; background-color: red;"></div>
  <div class='box' style="height:130px; background-color: blue;"></div>
  <div class='box' style="height:90px;"></div>
  <div class='box' style="height:86px;"></div>
  <div class='box' style="height:110px; background-color: green;"></div>
  <div class='box' style="height:40px;"></div>
</div>

CSS

#container{background-color:#aaa;margin: 0 auto;height:500px; width: 200px;}
.box{background-color:white;
  border:1px solid black;
  margin: 0;
  width:50%;
  display:block;
  float:left;
  box-sizing: border-box;
}
.box:nth-child(2n + 0) { float: right; }