JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
        <div class="child">varaible height child</div>
        <div class="child">varaible height child</div>
        <div class="child">fixed height child</div>
    </div>

CSS

.parent {
        position: relative;
        padding-bottom: 50px;
        height: 100vh;
    }
    
    .child:first-child {
        background: blue;
    }
    
    .child:nth-child(2) {
        background: yellow;
    }

    .child:last-child {
        position: absolute;
        bottom: 0;
        left:0;
        right:0;
        width: 100%;
        height: 50px;
        background: grey;
    }