JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="all">
<div class="higher">
    
</div>
<div class="bottom">
</div>
    </div>
</body>

CSS

.all {position:absolute; top:0px; left:0px; height:100%; width:100%;}
.higher {height:500px; width:80%; background-color:red; margin-bottom:80px;}

.bottom {position:absolute; bottom:0px; height:40px; width:100%; background-color:blue;}

JavaScript

$(".higher").click(function(){
    var allheight = $(".all").height() - 80;
var red = $(".higher").height();
    $(".higher").css("height", "+=40px");
    if(red > allheight){
        $(".all").css("height", "+=40px");
    }
});