JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <navigation>
        <ul>
            <li>Menu item</li>
            <li>Menu item</li>
            <li>Menu item</li>
            <li>Menu item</li>
            <li>Menu item</li>
            <li>Menu item</li>
            <li>Menu item</li>
        </ul>
        <ul>
            <li>Menu item</li>
            <li>Menu item</li>
            <li>Menu item</li>
            <li>Menu item</li>
            <li>Menu item</li>
            <li>Menu item</li>
            <li>Menu item</li>
        </ul>
        <ul>
            <li>Menu item</li>
            <li>Menu item</li>
            <li>Menu item</li>
            <li>Menu item</li>
            <li>Menu item</li>
            <li>Menu item</li>
            <li>Menu item</li>
        </ul>
        <ul>
            <li>Menu item</li>
            <li>Menu item</li>
            <li>Menu item</li>
            <li>Menu item</li>
            <li>Menu item</li>
            <li>Menu item</li>
            <li>Menu item</li>
        </ul>
        <ul>
            <li>Menu item</li>
            <li>Menu item</li>
            <li>Menu item</li>
            <li>Menu item</li>
            <li>Menu item</li>
            <li>Menu item</li>
            <li>Menu item</li>
        </ul>
    </navigation>
    <main>
        <header>
            This is a footer. It is absolutely positioned relatively to the containing table cell.
        </header>
        
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at facilisis erat. Cras venenatis nibh lectus, ac ultrices justo auctor id. Duis sollicitudin augue massa, id consectetur velit feugiat vel. Vivamus volutpat faucibus sem sed rhoncus. Aliquam imperdiet consectetur porta. Quisque ut euismod neque. Morbi aliquet tortor non justo auctor, a fringilla arcu cursus.</p>

        <p>Nunc vel nibh urna. Maecenas rhoncus velit eu lacus venenatis imperdiet. Quisque eget magna in sem vehicula auctor. Curabitur a risus vel ante consequat lobortis at...

CSS

div {
    padding: 1rem;
    background-color: yellow;
    display: table;
    width: 100%;
}

#wrapper{
    position: relative;
}

navigation {
    padding: 0.5rem;
    background-color: green;
    display: table-cell;
    width: 25%;
}

main {
    padding: 0.5rem;
    background-color: turquoise;
    display: table-cell;
    position: relative;
}

main header, main footer {
    margin: 0.5rem;
    position: absolute;
    background-color: red;
}

main header {
    top: 0.5rem;
}

main footer {
    bottom: 0.5rem;
}