JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="s()">create 5 lines of text</button>
<button onclick="m()">create 20 lines of text</button>
<button onclick="l()">create 300 lines of text</button>
<div id="content"></div>
<div role="footer">
    Test
</div>

CSS

[role="footer"] {
    width:100%;
    padding:10px;
    position:fixed;
    bottom:0; /* should be on bottom of #content */
    background-color:rgba(100,255,100,0.8);
    border:1px solid #0f0;
}
#content {
    border:1px dashed #f00;
}

JavaScript

function s() {
    clear();
    createText(5);
}

function m() {
    clear();
    createText(20)
}

function l() {
    clear();
    createText(300);
}

function createText(n) {
    for(var i = 0; i < n; i++) {
        document.getElementById('content').innerHTML += 'Lorem ipsum...<br/>';
    }
}

function clear() {
    document.getElementById('content').innerHTML = '';
}
m();