JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
            <div class="child">1</div>
            <div class="child">2</div>
            <div class="child">
                <div class="childTwo">
                    <div class="childTow-extra">132</div>
                </div>
            </div>
        </div>

CSS

html, body{
    height: 100%;
}
.parent{
    height: 100%;
    width: 100%;
    display: table;
}
.child{
    display: table-row;
}
.parent .child:nth-child(1){
    height: 100px;
    background: #ccc;
}
.parent .child:nth-child(2){
    height: 100px;
    background: #ddd;
}
.parent .child:nth-child(3){
    height: 100%;
    background: #555;
    margin: 10px;
}
.childTwo{
    height: 100%;
   // background: red; 
}
.childTow-extra{
    height: 100%;
    //background: blue;
    
}