JSFiddle - React, Tailwind, and code Playground

HTML

<div class="column-wrap">
    <div class="column"></div>
    <div class="column">
        <div class="box"></div>
        <div class="box align">
        </div>
    </div>
</div>

CSS

.column-wrap {
    overflow: hidden;
    color: #fff;
    text-align: center;
}
.column {
    float: left;
    width: 60%;
    height: 200px;
}
.column:first-child {
    width: 40%;
    background :red;
    height: 200px;
}
.box {
    height: 50%;
    background : blue;
}
.box:first-child {
    background : black;
}
.align {
    white-space: nowrap;
}
.align:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    marin-right: -0.25em; /* margin because inline block element takes 4px space for it. */
}
.align .holder {
    display: inline-block;
    vertical-align: bottom;
    white-space: normal;
}