JSFiddle - React, Tailwind, and code Playground

HTML

<div contenteditable="true">
    <table id="contentwrapper">
        <tbody>
            <tr>
                <td id="a" rowspan="2"></td>
                <td id="rw"></td>
            </tr>
            <tr>
                <td id="x"></td>
            </tr>
        </tbody>
    </table>
</div>

CSS

div {
    outline: none;
}
#contentwrapper {
    border: 1px solid blue;
    border-spacing: 0;
}
#contentwrapper td {
    vertical-align: top;
}
#contentwrapper p {
    line-height: 12px;
    margin: 3px 0;
}
#a {
    border: 3px solid red;
}
#rw {
    border: 3px solid orange;
}
#x {
    border: 3px solid lightblue;
}

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/>";

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/>";

x.innerHTML = "#x";