JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#wrapper{
  display:inline;
}

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

.box-grouping {
  display: flex;
  align-items: center;
  flex-flow: row wrap;
  max-height: 300px;
  width: auto;
  writing-mode: vertical-lr;
}


.box {
  writing-mode: horizontal-tb;
  text-align: center;
  color: white;
  padding: 10px;
  border: 1px solid black;
  width:10px
}

.box-type-1{
  height:50px;
}

.box-type-2{
  height:75px;
  
}

.box-type-3{
  height:100px;
}

.red {
  background: red;
}

.green {
  background: green;
}

.blue {
  background: blue;
}