JSFiddle - React, Tailwind, and code Playground

by colintoh

HTML

<header>
    "display:table" - The anti-hero of CSS Layout
</header>

<div class="body-wrapper">
    <div class="tt">
        <div class="sidebar-left box">Left sidebar</div>
        <div class="main-content box">
            <button class="js-press">Press to add more content</button>
            <p>Moon over Parma, bring my love to me tonight. Guide her to Cleveland, underneath your silvery light. We're going bowlin' so don't lose her in Solon. Moon over Parma, tonight!</p>
        </div> <!-- End of main-content -->
        <div class="sidebar-right box">Right sidebar</div>
    </div>
</div>

<footer>This is the footer</footer>

CSS

* { margin:0; padding:0;}

html, body{
    height: 100%;
}

body {
    width: 100%;
    display: table;
}


p {
    padding: 20px;
}

.body-wrapper {
    background: purple;
    height: 100%;
    display: table;
}

.box {
    display: table-cell;
}

header {
    background: orange;
    display: table-row;
    height: 1px;
}

.sidebar-right, .sidebar-left {
    width: 50px;
    background: green;
}

footer {
    display: table-row;
    height: 1px;
    background: orange;
}

.tt {
    display: table-row;
    height: 100%;
}

@media (max-width: 400px) {
    .box {
        display: block;
        width: 100%;
    }
}

JavaScript

var mainContent = document.querySelector('.main-content');

document.querySelector('.js-press').addEventListener('click', function(){
    var str = new Array(20).join("<p>Life is like a hurricane here in Duckburg. Race cars, lasers, aeroplanes - it's a duck blur.</p>");
    
    var para = document.createElement('div');
    para.innerHTML = str;
    
    mainContent.appendChild(para);
    
});