JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
<div class="child" style=" height: 400px;">1
</div>
<div class="child" style=" height: 200px;">2
</div>
<div class="child" style=" height: 500px;">3
</div>
<div class="child" style=" height: 100px;">4
</div>
<div class="child" style=" height: 400px;">5
</div>
<div class="child" style=" height: 200px;">6
</div>
<div class="child" style=" height: 200px;">7
</div>
</div>

CSS

.parent{
    column-count: 3;
 -moz-column-count: 3;
    -webkit-column-count: 3;
    -moz-column-gap: 0;
    -webkit-column-gap: 0;
    column-gap: 0;
     -moz-column-fill: initial;
    -webkit-column-fill: initial;
    column-fill: initial;
     -moz-column-gap: 1em;
 -webkit-column-gap: 1em; 
}
.child{
  border:3px solid #000;
-webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid-column;
  margin-bottom:20px;
}