JSFiddle - React, Tailwind, and code Playground

by Eugene Manager

HTML

<div id="container" class="border">
    Some content you don't want affected by the "bottom floating" div
    <div>Blah blah</div>
    <!--
    <br><br><br><br><br><br><br><br><br><br><br>d<br><br><br><br><br><br>d
    <br><br><br><br><br><br><br><br><br><br><br>d<br><br><br><br><br><br>d
    -->

    <div class="foot border">
        Some other content you want kept to the bottom
        <div>supports not just text</div>
    </div>
</div>

CSS

* { 
    /*padding:0; margin:0;
    */
}

html, body {
    height:100%;
}

.border {
    border : 1px solid gray;
}

#container {
    height:100%;
    border-collapse:collapse;
    display : table;
}

.foot {
    display : table-row;
    vertical-align : bottom;
    height : 1px;
}