JSFiddle - React, Tailwind, and code Playground

HTML

<table class="container">
    <tr>
        <td class="left">
        </td>
        <td class="right">
            <div class="top">
                <div class="block"></div>
            </div>
            <div class="bottom">
                <div class="filler"></div><div class="block"></div>
            </div>
        </td>
    </tr>
</table>

CSS

.container {
    width: 100%;
    height: 100%;
}
.left {
    width: 60%;
    height: 200px;
    background: #a88;
}
.right {
    height: 100%;
}
.right .top {
    height: 60%;
    width: 100%;
    background: #68a;
    vertical-align: top;
}
.right .bottom {
    height: 40%;
    width: 100%;
    background: #86a;
    vertical-align: bottom;
}
.block {
    width: 50px;
    height: 50px;
    background: black;
    display: inline-block;
}
.filler {
    height: 100%;
    background: red;
    display: inline-block;
}