JSFiddle - React, Tailwind, and code Playground

HTML

<p>Layout tables are indeed a bad thing, but with CSS you can have your cake (that being semantic markup) and eat it, too (that being the convenience of laying things out in tables).</p>

<p>Here's one solution to the problem of balanced-width and/or equal-height columns. The column widths are equally divided across the width of the container.</p>

<p>Clean markup&hellip; pretty layout&hellip; yes! (Browser support is pretty good, too: <a href="http://caniuse.com/css-table" target="_blank">http://caniuse.com/css-table</a>.)</p>

<section id="myContentSection">
    <div class="content">
        <section class="subsection">
            <p>foobar</p>
        </section>
        <section class="subsection">
            <p>Wampeter, Foma, Granfalloons</p>
        </section>
        <section class="subsection">
            <p>"O Oysters, come and walk with us!"<br />
The Walrus did beseech.<br />
"A pleasant walk, a pleasant talk,<br />
Along the briny beach:<br />
We cannot do with more than four,<br />
To give a hand to each."
            </p>
        </section>
    </div>
</section>

CSS

body {
    font-family:Verdana, Arial, sans-serif;
    font-size:10px;
}

#myContentSection {
    display:table;
    width:100%;
}

#myContentSection .content {
    display:table-row;
}

#myContentSection .subsection {
    display:table-cell;
    border:solid 1px gray;
    /* the next line is optional, but gives equal-width columns if you know the 
    number of columns ahead of time */
    width:33%;
    padding:4px 8px;
}

JavaScript

// if you know the number of columns ahead of time,
// you can skip all of this, and just set the width 
// percentage manually in the CSS (as I've already
// done in the "#myContentSection .subsection"
// selector above)

var sectionID = 'myContentSection';
var subsectionClass = 'subsection';

var contentSection = document.getElementById(sectionID);
var colCount = contentSection.getElementsByClassName('subsection').length;
console.log('# of columns:', colCount);
var width = Math.floor(100/colCount);
console.log('column width: ', width,'%');
var css = '#' + sectionID + ' .' + subsectionClass + ' { width: ' + width + '%; }';
var style = document.createElement('style');

style.type = 'text/css';
if (style.styleSheet){
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

document.head.appendChild(style);