JSFiddle - React, Tailwind, and code Playground

by buli_pl

HTML

<div id="column-container">
    <div>box 1</div>
    <div>box 2</div>
    <div>box 3</div>
    <div>box 4</div>
    <div>box 5</div>
    <div>box 6</div>
</div>

CSS

div#column-container {   
    /* Set 2 columns*/
	-moz-column-count: 2;
	-webkit-column-count: 2;
	column-count: 2;
    
     /* insignificant */
    width: 50%;
}

div#column-container div {
    background-color: yellow;
    
    /* set shadow for yellow elements */
    box-shadow: 0px 1px 3px #000;
    -webkit-box-shadow: 0px 0px 15px #000;
    -moz-box-shadow:    0px 0px 15px #000;
    box-shadow:         0px 0px 15px #000; 
    
    /* Make sure that yellow div is not split between columns */
    display: inline-block;
        
	/* the rest - not significant */
    width: 100%;
    height: 70px;
    margin-top: 0;
    margin-bottom: 20px;    
}