JSFiddle - React, Tailwind, and code Playground

by Donlee Malacad

HTML

<div id="div-1a">
    <div class="table-container">
        <div id="div_a">
            This is div_a
        </div>
    </div>
</div>

<div id="div-1b">
    <div class="table-container">
        <div id="div_b">
            This is div_b
        </div>
    </div>
</div>

CSS

#div-1a {
    position:absolute;
    top:0;
    left:0;
    width:50%;
    height:100%;
}

#div-1b {
    position:absolute;
    top:0;
    right:0;
    width:50%;
    height:100%;
}

.table-container {
    height:100%;
    width:100%;
    display:table;
}

#div_a {
    vertical-align:middle;
    text-align: center;
    height:100%;
    display:table-cell;
    border:1px solid #000;
}

#div_b {
    vertical-align:middle;
    height:100%;
    display:table-cell;
    border:1px solid #000;
}