JSFiddle - React, Tailwind, and code Playground

by Matt_Coughlin

HTML

<div id="header"><h1>header</h1></div>
<div id="content" class="clearfix">
    <div class="column1">
        <h2>Column 1</h2>
        <p>with<br/>extra<br/>lines<br/>added<br/>to<br/>
           increase<br/>the<br/>dynamic<br/>height.</p>
        <br/>
        <p>with<br/>extra<br/>lines<br/>added<br/>to<br/>
           increase<br/>the<br/>dynamic<br/>height.</p>
        <br/>
        <p>with<br/>extra<br/>lines<br/>added<br/>to<br/>
           increase<br/>the<br/>dynamic<br/>height.</p>
        <br/>
        <p>with<br/>extra<br/>lines<br/>added<br/>to<br/>
           increase<br/>the<br/>dynamic<br/>height.</p>
        <br/>
        <p>with<br/>extra<br/>lines<br/>added<br/>to<br/>
           increase<br/>the<br/>dynamic<br/>height.</p>
        <br/>
        <p>with<br/>extra<br/>lines<br/>added<br/>to<br/>
           increase<br/>the<br/>dynamic<br/>height.</p>
        <br/>
        <p>with<br/>extra<br/>lines<br/>added<br/>to<br/>
           increase<br/>the<br/>dynamic<br/>height.</p>
    </div>
    <div class="column2">
        <h2>Column 2</h2>
        <p>with<br/>extra<br/>lines<br/>added<br/>to<br/>
           increase<br/>the<br/>dynamic<br/>height.</p>
    </div>
</div>
<div id="footer"><h3>footer</h3></div>

CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
h1, h2, h3, p {
    margin: 0;
    font-family: Arial, sans-serif;
    font-weight: normal;
}
p {
    font-size: 12px;
}

/* Traditional clearfix */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

#header, #footer {
    position: fixed;
    left: 50%;
    width: 600px;
    margin-left: -300px;
}
#header {
    top: 0;
    height: 120px;
    background-color: #7ad;
}
#footer {
    bottom: 0;
    height: 60px;
    background-color: #7da;
}
#content {
    width: 600px;
    min-height: 100%;
    margin: 0 auto;
    padding: 120px 0 60px 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    background: url(http://www.forestpath.org/test/misc/img/backgrounds/two-column-lt-grey-dk-grey-1000-1000.png) repeat-y 53.6% top;
}
#content .column1 {
    float: left;
    width: 250px;
}
#content .column2 {
    float: left;
    width: 350px;
}