JSFiddle - React, Tailwind, and code Playground

by surya10633

HTML

<p>Float method may help you</p>

<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*/
	overflow: hidden;
    padding: 5px;
    display: block;
    
     /* insignificant */
    width: 50%;
}

div#column-container div {
    background-color: yellow;
    float: left;
    width: 40%;
    margin: 5%;
    
    /* 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: block;
        
	/* the rest - not significant */
    height: 70px;
}