JSFiddle - React, Tailwind, and code Playground

HTML

<div class="topPanel">

</div>
<div class="main">
    <center><button>Click Me!</button></center>
    <p>Hey look at me, i am moving along when you click button!</p>
</div>

CSS

body
{
        margin:0;
}

.topPanel
{
    width:100%;
    height:50px;
    background:#333;
}

.main
{
    top:50px;
    bottom:0px;
    width:100%;
    position:absolute;
    background:#ddd;
}

.height
{
height:100px;
}

.top
{
    top:100px;
}

p
{
    font-weight:bold;
}

JavaScript

$("button").click(function () {
    $(".topPanel").toggleClass("height", 300);
    $(".main").toggleClass("top", 300);
});