JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.container {
    width: 500px;
    
    -webkit-column-count: 3; -webkit-column-gap:4px;
    -moz-column-count:3; -moz-column-gap:4px;
    -o-column-count:3; -o-column-gap:4px;
    column-count:3; column-gap:4px;
}
.item {
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* IE 11 */
    display:table;                      /* Actually FF 20+ */
    min-width: 100px;
    background: #ccc;
    margin: 5px;
}

JavaScript

$('.container .item:nth-child(3n - 1)').addClass('container-col2');
$('.container .item:nth-child(3n)').addClass('container-col3');

$('.container-col2').appendTo('.container').removeClass('container-col2');
$('.container-col3').appendTo('.container').removeClass('container-col3');