JSFiddle - React, Tailwind, and code Playground

by Terry Mun

HTML

<!DOCTYPE html>
<html>
    <head><title>Demo</title></head>
    <body>
        <div class="table">
            <div class="table-caption">Header</div>
            <div class="table-row">
                <div id="cell1" class="table-cell">
                    <p>Column 1 is extra long.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at  varius ante. Phasellus faucibus neque rhoncus lorem posuere porttitor.  Proin sollicitudin neque vel leo auctor mattis. Praesent lobortis nibh  et ipsum facilisis ut condimentum eros gravida. Nulla facilisi. Sed  vehicula, leo pharetra vestibulum ultrices, tellus felis pellentesque  nibh, ut pharetra leo neque sed erat. Etiam sed turpis libero, a  imperdiet enim. Phasellus sit amet mauris id metus sagittis eleifend nec  vitae arcu. Cras tortor lacus, tristique vitae pretium non, tempus sed  sapien. Aliquam augue libero, porta eget laoreet a, mollis sit amet  diam. Donec id est eget justo pharetra faucibus. Morbi tempus rhoncus  hendrerit. Fusce feugiat faucibus sollicitudin. Quisque dignissim auctor  erat, eu molestie ipsum bibendum eu. </p>
                </div>
                <div id="cell2" class="table-cell">
                    <p>Column 2 is not too long.</p>
                    <p>Nunc vel odio libero. Nulla fringilla vulputate imperdiet. Etiam ut  lectus risus. Morbi congue, libero consectetur sagittis tincidunt,  lectus neque pulvinar tellus, nec posuere nulla libero et lorem. Integer  tempus fringilla sapien sed aliquet. Nullam facilisis nisl sit amet  odio semper quis viverra nunc fermentum. Nulla augue lacus, scelerisque  iaculis dapibus ac, egestas vel nisi</p>
                </div>
                <div id="cell3" class="table-cell">
                    <p>Column 3 is short.</p>
                </div>
            </div>
        </div>
    </body>
</html>

CSS

.table {
    display: table;
    width: 500px;
}

.table div {
    padding: 1.0em;
}

.table p {
    margin-bottom: 1.0em;
}

.table-caption {
    background-color: #333;
    color: #fff;
    display: table-caption;
    text-align: center;
   font-size: 1.5em;
}

.table-row {
    display: table-row;
}

.table-cell {
   display: table-cell;
   width: 33.3%;
}

#cell1, #cell3 {
    background-color: #ddd;
}

#cell2 {
    background-color: #eee;
}