JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Floated</h1>
<p><strong>Caveats:</strong> An extra element must be added with a width wide enough that all the elements stay on one line. This keeps elements from dropping down to a new line.</p>

<div class="float-wrapper">
    <div class="width">
        <div class="fixed_column">
            Column #0
        </div>
        <div class="fixed_column">
            Column #1
        </div>
        <div class="fixed_column">
            Column #2
        </div>
    </div>
</div>

<h1>Inline Block</h1>
<p><strong>Caveats:</strong> IE7 doesn't work with this technique unless a width is element is added (as in the floated example). White space can't be used between the columns (or it is rendered as spaces on the page).</p>

<div class="ib-wrapper">
    <div class="fixed_column">
       Column #0
    </div><div class="fixed_column">
       Column #1
    </div><div class="fixed_column">
        Column #2
    </div>
</div>

<h1>Table Cell</h1>
<p><strong>Caveats:</strong> IE7 doesn't support `display: table-cell;` :-p It would appear you also need to add an element with `display: table; table-layout: fixed; width: 100%;` for the columns to take the width as specified in the CSS (it won't work without those properties applied… the columns try to shrink to fit).</p>

<div class="table-wrapper">
    <div class="table">
        <div class="fixed_column">
           Column #0
        </div>
        <div class="fixed_column">
           Column #1
        </div>
        <div class="fixed_column">
            Column #2
        </div>
    </div>
</div>

CSS

/* General styles used by all columns */
.fixed_column {
    min-height: 200px;
    position: relative;
    width: 239px;
    padding: 4px;
    border: 1px solid #ccc;
    margin-right: 1px;
    background: lightBlue;
}

body {
    font: 12px Ubuntu, Arial, sans-serif;
    margin: 20px;
}

h1 {
    margin: 2em 0 .8em;
}
h1:first-child {
    margin-top: 0;
}

/* Styles for floated columns */
.float-wrapper {
    overflow: auto;
}
.float-wrapper .width {
    width: 750px;
}
.float-wrapper .fixed_column {
    float: left;
}

/* Styles for inline-block columns */
.ib-wrapper {
    white-space: nowrap; /* Prevent elements from dropping down */
    overflow: auto;
}
.ib-wrapper .fixed_column {
    display: inline-block;
    vertical-align: top;
    white-space: normal; /* Undo `white-space: nowrap;` so text flows normally */
    /* Fixes for IE7 */
    *zoom: 1;
    *display: inline;
}

/* Styles for `display: table-cell;` */
.table-wrapper {
    overflow: auto;
    width: 100%;
}
.table-wrapper .table {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.table-wrapper .fixed_column {
    display: table-cell;
    vertical-align: top;
    height: 200px;
}