JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sticky row"><p>All these are evidently sections, as it were,</p></div> 

<div class="row"> 
    <div class="wrapper table"> 
        <div class="row"> 
            <div class="column" style="width:200px;"><p>Three-Dimensional representations of his Four-Dimensioned being, which is a fixed and unalterable thing.'</p></div> 
            <div class="column"><p>'Scientific people,' proceeded the Time Traveller, after the pause required for the proper assimilation of this, 'know very well that Time is only a kind of Space. Here is a popular scientific diagram, a weather record.</p></div> 
        </div> 
    </div>    
</div> 

<div class="sticky row"> 
    <div class="wrapper"><p>first</p><p>sticky</p><p>footer</p></div> 
</div> 
<div class="sticky row"><p>bottom sticky footer</p></div>

CSS

*{ margin:0 }
html{height:100%; overflow-y:scroll;}
body{ display:table; width:100%; height:100%;}
.wrapper{ width:700px; margin:0 auto;}
.table{display:table;}
.row{ display:table-row; }
.column{ display:table-cell; }
.sticky{ height:1px; }

JavaScript

function ranHex() {
    return '#' + Math.floor(Math.random() * 16777215).toString(16);
}
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
    divs[i].style.background = ranHex();
}