JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="sidebar">
        <ul>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>
            
        </ul>
    </div>
    <div class="main">
        main content main content main content main content main content main content main content main content main content main content main content main content main content main content main
    </div>
    
</div>
<div class="footer">
   footer stuff
</div>

CSS

.container {
    width:100%;
    display:table;
}
.sidebar, .main {
    width:50%;
    height:auto;
    display:table-cell;
}
.footer {
    width:100%;
    color:#fff;
    background:#000;
}
.main {
    background:#eee;
    padding:1em;
}
.sidebar {
    background:#666;
}