JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<div class='row cf'>
    <div class='col'>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.</p>
    </div>
    <div class='col'>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.</p>
    </div>
    <div class='col'>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.</p>
    </div>
    <div class='col'>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.</p>
    </div>
</div>

CSS

*{margin: 0; padding: 0; border: 0 none;}

.row{
    overflow: hidden;
    background-color: #ccc;
}

.col{
    display: block;
    float: left;
    padding: .5em;
    width: 25%;
    
    /* equal height columns */
    margin-bottom: -99999px;
    padding-bottom: 99999px;
    background-color: #eee;
    
    /** fake margin */
    border: 10px solid #fff;
    box-sizing: border-box;
}