JSFiddle - React, Tailwind, and code Playground

by Stas Raranetskyi

HTML

<div class="root">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
  <div class="child">9</div>
  <div class="child">10</div>
</div>

CSS

.root {
  margin: 0;
  height: 50px;
  overflow: auto;
  column-count: 2;
  column-gap: 10px;
}

.child {
  box-sizing: border-box;
  background: #ccc;
  height: 30px;
  margin-bottom: 10px;
}
.root:before,.root:after {
  width: 100%;
  content: '';
  order: 1;
}
.child:nth-child(2n) {
  order: 2;
}
.child:nth-child(2n+1) {
  order: 1;
}

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

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

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