JSFiddle - React, Tailwind, and code Playground

HTML

<div id="background"></div>
<table class="main">
    <tr>
        <td>
            <div class="left"><div></div></div>
        </td>
        <td class="content">content</td>
        <td>
            <div class="right"><div></div></div>
        </td>
    </tr>
</table>

CSS

html,body{height:100%;margin:0px;padding:0px;}
table,tbody,tr,td{position:relative;min-height:100%;vertical-align:top;border:0px;border-collapse:collapse;margin:0px;padding:0px;}
.left{position:absolute;width:100%;height:100%;overflow:hidden;}
.left>div{position:absolute;left:0px;max-width:50px;width:100%;height:100%;background:#999;}
.right{position:absolute;width:100%;height:100%;overflow:hidden;}
.right>div{position:absolute;right:0px;max-width:50px;width:100%;height:100%;background:#999;}
.content{width:600px;}
.main{min-width:600px;width:100%;min-height:100%;z-index:1;}
#background{position:fixed;width:100%;height:100%;overflow:hidden;z-index:0;background:#bbb;}