JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
    <div class="col">
        <div class="item red"></div>
        <div class="item blue"></div>
    </div>
    <div class="col">
        <div class="large item green"></div>
    </div>
</div>

CSS

.row {
    position: relative;
    background:#f99;
}

.col {
    margin:0 0 0 8px;
    display:inline-block;
    width:40%;
    position: relative;
    vertical-align:top;
    background: #999;
    height:100%;
}
.col:first-child {
    margin:0;
}

.item {
    display:block;
    position: relative;
    top:0;
    margin: 12px 0 0 0;
    min-height: 80px;
    width: 100%;
    outline:4px solid black;
}
.item:first-child {
    margin:0;
}

.item.large {
    min-height:120px;
    height:100%;
}

.item.red {
    background:#f00;
}
.item.blue {
    background:#0f0;
}
.item.green {
    background:#00f;
}