JSFiddle - React, Tailwind, and code Playground

HTML

<div class="panes">
    <div id="pane1" class="pane">
        <div class="pane-content">PANE 1PANE 1PANE 1PANE 1PANE 1PANE 1PANE 1PANE 1PANE 1PANE 1PANE 1PANE 1PANE 1PANE 1PANE 1PANE 1PANE 1PANE 1PANE 1PANE 1PANE 1PANE 1PANE 1PANE 1PANE 1PANE 1PANE 1PANE 1PANE 1PANE 1PANE 1PANE 1PANE 1PANE 1PANE 1PANE 1 END</div>
    </div>
    <div id="pane2" class="pane">
        <div class="pane-content">PANE 2PANE 2PANE 2PANE 2PANE 2PANE 2PANE 2PANE 2PANE 2PANE 2 END</div>
    </div>
    <div id="pane3" class="pane">
        <div class="pane-content">
            <textarea></textarea>
        </div>
    </div>
</div>

CSS

.panes {
    display: table;
    table-layout: fixed;
    width:100%;
    height:100px;
}
.pane {
    display: table-cell;
    border: solid 1px;
    vertical-align: top;
}
.pane-content {
    display: block;
    overflow: auto;
    height: 100px;
    border: solid 1px red;
}
.pane-content textarea {
    display: block; /*This fix the issue in IE but other browsers still broken*/
    width: 100%;
    height: 100px;
}