JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="item">1</div>
    <div class="item">2 - ldfj sdjflkdsjfl ksjdl khdskdfsjhfkjsdh fkjhf kjsdhf kjsdhf ksdhfk
        jsdhfjk sdfkjdsh cj dkjhdkjh skdjh dksjdsjhfjksd hfjkhkfjsdlfjsdlkfj</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: 2; -webkit-column-gap:4px;
    -moz-column-count:2; -moz-column-gap:4px;
    -o-column-count:2; -o-column-gap:4px;
    column-count:2; 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(even)').appendTo('.container');