JSFiddle - React, Tailwind, and code Playground

by Matt_Coughlin

HTML

<div id="header"><h1>header</h1></div>
<div id="content">
    <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;
}

#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 {
    display: table;
    table-layout: fixed;
    width: 600px;
    height: 100%;
    margin: 0 auto;
    padding: 120px 0 60px 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
#content .column1 {
    display: table-cell;
    width: 250px;
    background-color: #eee;
}
#content .column2 {
    display: table-cell;
    width: 350px;
    background-color: #ddd;
}