JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header"></div>
<div class='table'>
    <div class='row'>
        <div class='cell'>
            <div class='wrap'>
                <div class='pane'>
                Content here that is long enough to wrap at the sides. Content here that is long enough to wrap at the sides. Content here that is long enough to wrap at the sides.  And still hit the bottom.
                </div>
            </div>
        </div>
        <div class='cell' style='background-color:orange; width:230px;'>
            cell2
        </div>
    </div>
</div>

CSS

.header {
    height: 50px;
    width: 100%;
    background: blue;
}
.table {
    width:100%;
    height:200px;
    display:table;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
    background-color:red;
    position:relative;
}
.wrap {
    display:block;
    position:absolute;
    background-color:purple;
    width:100%;
    height:100%;
}
.pane {
     background-color:green;
    height:100%;
    width:100%;
    position:absolute;    
}