JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <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>

CSS

#container {
    width:500px;
    height:500px;
    border:1px solid black;
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    height: 300px;
}
.child {
    width:250px;
    height:100px;
    border:1px solid red; 
    box-sizing:border-box;
    -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+ */
}
.child:nth-of-type(4 ),.child:nth-of-type(5),.child:nth-of-type(6 ){
     background:grey;
}

JavaScript

$('.child').click(function() { 
    $(this,'.child').toggle();
    return false;
});