JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Columns L, C &amp; R</h1>
<div class="container">
    <div class="column-container with-l with-r">
        <div class="column-l">
            <div class="cell">
                <h2>Column L</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus augue, congue vel est id, eleifend adipiscing nisi. Quisque viverra nibh id ipsum iaculis, vel convallis erat mattis. Quisque lorem arcu, consequat at feugiat vitae, euismod ut velit. Etiam ut quam nunc.</p>
            </div>
        </div>
        <div class="column-c">
            <div class="cell">
                <h2>Column C</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus augue, congue vel est id, eleifend adipiscing nisi. Quisque viverra nibh id ipsum iaculis, vel convallis erat mattis. Quisque lorem arcu, consequat at feugiat vitae, euismod ut velit. Etiam ut quam nunc. Maecenas porttitor vitae urna vel vehicula. Proin id diam nunc. Pellentesque ut pretium risus, sed mollis velit.</p>
            </div>
        </div>
        <div class="column-r">
            <div class="cell">
                <h2>Column R</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus augue, congue vel est id, eleifend adipiscing nisi. Quisque viverra nibh id ipsum iaculis, vel convallis erat mattis. Quisque lorem arcu, consequat at feugiat vitae, euismod ut velit. Etiam ut quam nunc.</p>
            </div>
        </div>
    </div>
</div>

<h1>Columns L &amp; C</h1>
<div class="container">
    <div class="column-container with-l">
        <div class="column-l">
            <div class="cell">
                <h2>Column L</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus augue, congue vel est id, eleifend adipiscing nisi. Quisque viverra nibh id ipsum iaculis, vel convallis erat mattis. Quisque lorem arcu, consequat at feugiat vitae, euismod ut velit. Etiam ut quam...

SCSS

/*************************/
/* quick and dirty reset */
/*************************/
* { 
    margin: 0;
    padding: 0;
    outline: 1px dotted #f00; 
}

/*************************/
/* some boilerplate crap */
/*************************/
%block {
    position: relative;
    display: block;
}

%clear {
    &:after {
        @extend %block;
        content: "";
        float: none;
        clear: both;
        width: 100%;
    }
}

%layer {
    @extend %block;
    @extend %clear;
}

/***********************************/
/* all the important stuff follows */
/***********************************/

.container { 
    @extend %layer;
    margin-left: auto;
    margin-right: auto;
    min-width: 960px;
    width: 90%;
}

.column-container {
    @extend %layer;
    &.with-l { margin-left: 240px; }
    &.with-r { margin-right: 240px; }
}

%column { 
    @extend %block;
    float: left; 
}

.column-l {
    @extend %column;
    width: 240px;
    margin-left: -240px;
}

.column-c {
    @extend %column;
    width: 100%;
}

.column-r {
    @extend %column;
    width: 240px;
    margin-right: -240px;
}

.cell { 
    @extend %layer;
    padding: 1em;
}