JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="button1">add to top</a>
<a href="#" id="button">click</a>

<div class="container">
    <div href="#" class="box box1">1 sdfsdf sdf sdf sdf sdf sdf sdf sd</div>
    <div href="#" class="box box2">2</div>
    <div href="#" class="box box3">3</div>
    <div href="#" class="box box4">4</div>
    <div href="#" class="box box5">5</div>
    <div href="#" class="box box6">6</div>
    <div href="#" class="box box4">6.1</div>
    <div href="#" class="box box1">7</div>
    <div href="#" class="box box2">8</div>
    <div href="#" class="box box3">9</div>
    <div href="#" class="box box4">10</div>
    <div href="#" class="box box5">11</div>
</div>

CSS

.container {
    border: 1px solid red;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
    width: 420px;
}
.box {
    display: inline-block;
    width: 200px;
    margin-bottom: 5px;
    
    -webkit-column-break-inside: avoid;
    -moz-page-break: avoid;
    break-inside: avoid;
}
.box1 {
    background-color: lime;
    height: 200px;
}
.box2 {
    background-color: blue;
    height: 150px;
}
.box3 {
    background-color: red;
    height: 230px;
}
.box4 {
    background-color: green;
    height: 80px;
}
.box5 {
    background-color: #454545;
    height: 160px;
}
.box6 {
    background-color: #222222;
    height: 180px;
}