JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
  <div class="box-grouping-wrapper">
    <div class="box-grouping">
      <span class="red box">1</span>
      <span class="red box">2</span>
      <span class="red box">3</span>
      <span class="red box">4</span>
      <span class="red box">5</span>
      <span class="red box">6</span>
    </div>
  </div>
  <div class="box-grouping-wrapper">
    <div class="box-grouping">
      <span class="green box">1</span>
      <span class="green box">2</span>
      <span class="green box">3</span>
      <span class="green box">4</span>
      <span class="green box">5</span>
      <span class="green box">6</span>
    </div>
  </div>
</div>

CSS

#wrapper{
  display:inline;
}

.box-grouping-wrapper{
  display: inline-block;
}

.box-grouping {
  width:300px;
  height:500px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}


.box {
  text-align: center;
  color: white;
  padding: 50px;
  border: 1px solid black;
  width:50px
}

.red {
  background: red;
}

.green {
  background: green;
}