JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
</div>

CSS

.container {
  width: 320px;
}

.box {
  width: 100px;
  margin-bottom: 10px;
  margin-right: 10px;
  background-color: #bbb;
  color: red;
}

.box:nth-child(1) {
  height: 150px;
}

.box:nth-child(2) {
  height: 100px;
}

.box:nth-child(3) {
  height: 200px;
}

.box:nth-child(4) {
  height: 100px;
}

.box:nth-child(5) {
  height: 100px;
}

.box:nth-child(6) {
  height: 200px;
}

.box:nth-child(7) {
  height: 150px;
}

.box:nth-child(8) {
  height: 150px;
}

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.box:nth-child(3n+2) {
  order: 1;
}

.box:nth-child(3n+3) {
  order: 2;
}

.box:nth-child(2), .box:nth-child(3) {
  page-break-before: always;
}