JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="header"></div>
    <div class="innerwrap">
        <div class="cell1">
             <div class="minicell1">I am 60% large of my parent (which is 50% of the main container) and I take 100% of the height of my parent</div>
        </div>
        <div class="cell2">I am 50% of the main container and 100% of my parent</div>
    </div>
    <div class="footer"></div>
</div>

CSS

.wrap{background:pink;position:absolute;top:0;left:0;right:0;bottom:0}
.innerwrap{background:lime;position:absolute;height:100%;top:55px;left:0;right:0;bottom:25px;font-size:0;letter-spacing:-1;}
.header{position:absolute;width:100%;height:50px;background:red}
.cell1, .cell2{width:50%;height:100%;background:silver;display:inline-block;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;font-size:20px;letter-spacing:normal;text-align:center;float:left}
.cell2{background:blue;color:white;}
.minicell1{width:60%; height: 100%; background:yellow}
.footer{position:absolute;bottom:0;width:100%;height:20px;background:red}