JSFiddle - React, Tailwind, and code Playground

by Matt_Coughlin

HTML

<div id="header"><h1>header</h1></div>
<div id="container">
    <table>
        <tr>
            <td>
                <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>
            </td>
            <td>
                <h2>Column 2</h2>
                <p>with<br/>extra<br/>lines<br/>added<br/>to<br/>
                    increase<br/>the<br/>dynamic<br/>height.</p>
            </td>
        </tr>
    </table>
</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;
}
#container {
    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;
}
#container table {
    table-layout: fixed;
    width: 100%;
    height: 100%;
    border: 0;
    border-spacing: 0;
    padding: 0;
}
#container table td {
    padding: 0;
    vertical-align: top;
}
#container table td {
    width: 250px;
    background-color: #eee;
}
#container table td + td {
    width: 350px;
    background-color: #ddd;
}