JSFiddle - React, Tailwind, and code Playground

HTML

<div id="contentwrapper">
    <div id="a"></div>
    <div id="b">
        <div id="bcontentwrapper">
            <div id="rwwrapper">
                <div id="rw"></div>
            </div>
            <div id="xwrapper">
                <div id="x"></div>
            </div>
        </div>
    </div>
</div>

CSS

#contentwrapper {
    display: table;
}

#a {
    display: table-cell;
}

#b {
    display: table-cell;
    height: 0;
}

#bcontentwrapper {
    display: table;
    height: 100%;
}

#rwwrapper {
    display: table-row;
    height: 0;
}

#rw {
    display: table-cell;
}

#xwrapper {
    display: table-row;
    height: 100%;
}

#x {
    display: table-cell;
}

#contentwrapper {
    border: 1px solid blue;
}

#a {
    border: 3px solid red;
    outline: none;
}

#rw {
    border: 3px solid orange;
    outline: none;
}

#x {
    border: 3px solid lightblue;
    outline: none;
}

/* bug fix for contenteditable */
#a:before, #rw:before {
    content: " ";
    display: inline-block;
    position: relative;
    left: -1000px;
    width: 0;
}

JavaScript

var a = document.getElementById("a");
var rw = document.getElementById("rw");
var x = document.getElementById("x");

a.innerHTML = "#a&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/><br/><br/><br/><br/><br/><br/>";
a.setAttribute("contentEditable", true);

rw.innerHTML = "#rw&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/><br/><br/><br/>";
rw.setAttribute("contentEditable", true);

x.innerHTML = "#x";
x.setAttribute("contentEditable", true);