JSFiddle - React, Tailwind, and code Playground

HTML

<div style="position:absolute; left:5px; right:5px; bottom:5px; top:5px;"><!--simulated page, workaround jsfiddle bug-->

<div id="everything">
    <div id="main">
        <div id="columns">
            <div id="sidebar">
            </div>
            <div id="topbar">
            </div>
            This is my site.
            Yay.
            <pre>
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            etc.
            </pre>
        </div>
    </div>
    <div id="footer">
        footer
    </div>
</div>

</div><!--simulated page-->

CSS

* {
    border:1px dashed red;
    -webkit-border-radius:10px; -moz-border-radius:10px;
    padding:5px;
    background-color:hsla(0,50%,50%, 0.1);
}

#everything {
    position:relative;
    width:100%; min-height:100%;
    border:2px solid blue;
}

#main {
    margin-bottom:10%; /*must be same height as footer*/
    border:2px solid green;
}

#footer {
    position:absolute;
    left:0px; right:0px; bottom:0px; height:10%;
}

/* begin site-specific stuff */

#columns {
    margin-top:10%;
    margin-left:30%; margin-right:30%;
    background-color:skyblue;
    
    position:relative;
}

#sidebar {
    position:absolute;
    top:0px; bottom:0px;
    right:100%; width:7em;
    background-color:pink;
}

#topbar {
    position:absolute;
    bottom:100%; height:3em;
    right:-10%; left:10%;    
}

JavaScript

$('pre').animate({height:1500}, 3000)