JSFiddle - React, Tailwind, and code Playground

HTML

<div class="blocks-wrapper">
    <div class="blocks-inner-wrapper row-1">
        <div class="block">A</div>
        <div class="block">B</div>
    </div>
    <div class="blocks-inner-wrapper row-2">
        <div class="block">C</div>
        <div class="block">D</div>
    </div>
    <div class="thing-that-screws-up-layout">A link to another section</div>
</div>

CSS

.blocks-wrapper {
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
}
.blocks-inner-wrapper {
    display: table-row;
    width: 100%;
    height: 100%;
}
.row-1 .block:nth-child(1) {
    background:#82FFFB;
}
.row-1 .block:nth-child(2) {
    background:#FFE382;
}
.row-2 .block:nth-child(1) {
    background:#E1FF83;
}
.row-2 .block:nth-child(2) {
    background:#FEBD87;
}
.block {
    width: 50%;
    height: 100%;
    display: table-cell;
    text-align: center;
    padding: 80px 40px 80px 40px;
}
.thing-that-screws-up-layout{
    width: 100%;
    border: 1px solid #efefef;
    position: absolute;
    bottom: 0;
    height: 50px;
    background: #fff;
    padding-top: 30px;
    text-align: center;
}