JSFiddle - React, Tailwind, and code Playground

by danield770

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 {   
    height: 270px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    
}
@supports (not (flex-wrap: wrap)) and (-moz-columns: 2) {
    div#column-container { 
        -moz-column-count: 2;
        column-count: 2;
        display: block;
        width: 50%;
    }
}

div#column-container div {
    background-color: yellow;
    width: 200px;
    /* 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 */
    height: 70px;
    margin-top: 0;
    margin-bottom: 20px; 
    margin-right: 20px;
}