JSFiddle - React, Tailwind, and code Playground

HTML

<div id="blue_box">
    <div id="left"></div>
    <div class="divider"></div>
    <div id="right"></div>
</div>

CSS

#left {
    width:200px;
    height:200px;
    float:left;
    background:white;
}

#right {
    width:200px;
    height:200px;
    float:right;
    background:white;
}

#blue_box {
    position: relative;
    background:blue;
    width:500px;
    height:300px;
    padding:10px;
}
.divider{
    position:absolute;
    left:50%;
    top:10%;
    bottom:10%;
    border-left:1px solid white;
}