JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <nav>
        <p>This is a menu. It is a table-cell contained in a table wrapper element.</p>
        <p>This is because I want its background to extend all the way down, even if the content is longer.</p>
        
        <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>
    </nav>
    <main>
        <header>
            <p>This is a header. It is absolutely positioned relatively to the containing main element.</p>
            <p>I suppose it strictly doesn't have to be, but I did it anyway for symmetry with the footer.</p>
        </header>
        
        <p>This is content. It is a table-cell contained in a table wrapper element.</p>
        <p>This is because I want its background to extend all the way down, even if the menu is longer.</p>
        
        <p>Lorem ipsum dolor sit amet, consectetur...

CSS

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

nav {
    vertical-align: top;
    padding: 0.5rem;
    background-color: green;
    display: table-cell;
    width: 25%;
}

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

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

main header {
    top: 0.5rem;
}

main footer {
    bottom: 0.5rem;
}