JSFiddle - React, Tailwind, and code Playground

HTML

<div class="upper-container">
    Hidden container
</div>
<div class="main-container">
    Visibile container
    <div class="click-this">
        Click This to Slide Down
    </div>
</div>

CSS

.upper-container{
  position: absolute;
  top: -750px;
  z-index: 1000;
  padding-top: 40px;
  background:red;
}
.main-container{
    background: blue;
      position: relative;    
}
.click-this{
    background: #fff;
    color: #333;
    padding: 20px;
    margin-left: 20px;
    width: 300px;
    margin-top: 40px;
}

JavaScript

$(document).ready(function(){
    var heightVar = 0 - $(window).height();
    $('.upper-container').css('top',heightVar+'px');
    $('.main-container').css('height', $(window).height()+'px');
    $('.click-this').on('click', function(){
        $('.upper-container').css('top', '0');
        $('.main-container').css('margin-top',$('.upper-container').height()+'px');
    });
});