JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<script src="https://raw.github.com/bgrins/loremjs/master/lorem.js"></script>
<div id="one-true" class="clearfix">
    <div class="col col1">
        <div class='col-inner'>
            <h3>I am listed first in source order.</h3>
            
            <p data-lorem='5'></p>
        </div>        
    </div>
    <div class="col col2">
        <div class='col-inner'>
        
        <h3>I am listed second in source order.</h3>
        
        <p data-lorem='2'></p>
        </div>        
    </div>
    <div class="col col3">
        <div class='col-inner'>
        
        <h3>I am listed third in source order.</h3>
        
        <p data-lorem='1'></p>
        
        </div>
    
    </div>
</div>

CSS

#one-true { overflow: hidden; }
#one-true .col {
    width: 33.15%;
    float: left;
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

#one-true .col1 {
    background: #cfc;
}
.col-inner {
    padding: 10px;
    
}
.col2 {
    background: #ffc;        
}
.col3 {
    background: #fcf;   
}
        /*#one-true .col:nth-child(1) { margin-left: 33.3%; background: #ccc; }
        #one-true .col:nth-child(2) { margin-left: -66.3%; background: #eee; }
        #one-true .col:nth-child(3) { left: 0; background: #eee; }*/
        #one-true p { margin-bottom: 30px; } /* Bottom padding on the column doesn't work */


.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }