JSFiddle - React, Tailwind, and code Playground

HTML

<header></header>

<div id="wrapper">
    <div id="left-sidebar">
    </div>
    
    <div id="content">
        <p>To sailors, oaths are household words; they will swear in the trance of the calm, and in the teeth of the tempest; they will imprecate curses from the topsail-yard-arms, when most they teeter over to a seething sea; but in all my voyagings, seldom have I heard a common oath when God's burning finger has been laid on the ship; when His "Mene, Mene, Tekel Upharsin" has been woven into the shrouds and the cordage.</p>
    </div>
    
    <div id="right-sidebar">
        Optional Content
    </div>
</div>

<footer></footer>

CSS

#wrapper {
    display: table;
}

#left-sidebar, #content, #right-sidebar {
    display: table-cell;
    vertical-align: top;
}

header, footer {
    background: pink;
    width: 100%;
    height: 2em;
}

#content {
}

#left-sidebar {
    background: lime;
    max-width: 25%;
}

#right-sidebar {
    background: red;
    max-width: 25%;
}