JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box-wrap">
    <div id="A">A</div>
    <div id="B">
        <div id="D">D</div>
    </div>
     <div id="C">C</div>
</div>

CSS

.box-wrap{
    border: 1px solid #000000;
    height: 267px;
    margin: 10px;
    padding: 5px;
    width: 357px;
}
#A{margin-bottom:5px;}
#C{margin-top:5px;}
#A,
#C{
    background:#857a60;
    height:70px;
    width:100%;
}
#D{
    background:#0096FF;
    height: 93px;
    margin: 0 auto;
    width: 219px;
}
#B{
   background: #857A60;
    display: table-cell;
    height: 117px;
    position: static;
    vertical-align: middle;
    width: 357px;
}