JSFiddle - React, Tailwind, and code Playground

HTML

<div style="position: absolute; top: 0; right: 0; bottom: 0; left: 0;">
<div class="table">
    <div class="top">
        <div class="table">
            <div class="header" >
                header
            </div>
             <div class="content">
                1.1
            </div>
            <div class="footer">
                1.2
            </div>
        </div>
    </div>
    <div class="bottom">
        <button id="changeSize"></button>
    </div>
</div>


</div>

CSS

<style type="text/css">
    .table
    {
        display: table;
        width: 100%;
        height: 100%;
    }

    .bottom
    {
        display: table-row;
        height: 100px;
        background-color: red;
    }

    .top
    {
        display: table-row;
        height: 100%;
        background-color: yellow;
        position: relative;
    }

    .header
    {
         height: 100px;
         background-color : gray;
    }
    
    .content
    {
        display: table-row;
        height: 100%;
        background-color: yellow;
        position: relative;
    }
    
    .footer
    {
        display: table-row;
        height: 100px;
        background-color: blue;
    }

</style>

JavaScript

$(document).ready(function(){  
$("#changeSize").click(function () {
            if ($(".bottom").height() == 50) {
                $(".bottom").height(100);
            } else {
                $(".bottom").height(50);
            }
});
    });