JSFiddle - React, Tailwind, and code Playground

by thirtydot

HTML

<div class="container hasFlex">
    <div id="main" role="main" class="box1">
        <div class="innerBG">
            a bunch of stuff (divs, text, etc) go herea bunch of stuff (divs, text, etc) go herea bunch of stuff (divs, text, etc) go herea bunch of stuff (divs, text, etc) go here
        </div>
    </div>
    <div id="sidebar" class="box1">
        <div class="innerBG">
            a bunch more stuff (divs, text, etc.) go here
        </div>
    </div>
</div>

CSS

.hasFlex {
    display: table;
    table-layout: fixed;
    
    width: 100%;
}
.box1 {
    display: table-cell;
}
.container {
    margin-bottom: 10px;
}

body {
    padding: 20px;
}
div {
    border: 1px dashed red;
}