JSFiddle - React, Tailwind, and code Playground

HTML

<div class="items">
  <div class="item elm1">1</div>
  <div class="item elm2">2</div>
  <div class="item elm3">3</div>
  <div class="item elm4">4</div>
  <div class="item elm5">5</div>
  <div class="item elm6">6</div>
  <div class="item elm7">7</div>
</div>

CSS

.items {
  display: block;
  overflow: hidden;
  width: 360px;
}

.item {
  box-sizing: border-box;
  width: 170px;
  margin: 5px;
  background: #000;
  color: #fff;
  text-align: center;
  font-family: 'Arial', 'Helvetica', sans-serif;
  font-size: 48pt;
  font-weight: bold;
}

.item:nth-child(odd) {
  clear: left;
  float: left;
}

.item:nth-child(even) {
  clear: right;
  float: right;
}

.elm1 {
  height: 180px;
  line-height: 180px;
}
	
.elm2 {
  height: 110px;
  line-height: 110px;
}
	
.elm3 {
  height: 100px;
  line-height: 100px;
}
	
.elm4 {
  height: 150px;
  line-height: 150px;
}
	
.elm5 {
  height: 130px;
  line-height: 130px;
}
	
.elm6 {
  height: 90px;
  line-height: 90px;
}
	
.elm7 {
  height: 180px;
  line-height: 180px;
}