JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
    
    
    
    <div class="header-bot">
        <span class="show">second toolbar</span>
    </div>
    
    <div class="header-extra">
        <span class="hide">back</span>   
    </div>
    <div class="header-top">
        <span>first toolbar</span>
    </div>

    
    
</div>

CSS

body {margin:0;padding:0;}
span {color:#fff;}
.header {
    width:100%;
    position:fixed;
    top:0;
}
.header-top {
    background-color:black;
    height:50px;
    position:absolute;
    top:0px;
    width:100%;
}
.header-bot {
    background-color:red;
    height:50px;
    position:absolute;
    top:50px;
    width:100%;
}
.header-extra {
    background-color:yellow;
    height:50px;
    position:absolute;
    top:0;
    width:100%;
    transition: all 0.3s ease;
}
.down {
    top:50px;
}
.hide {color:#000;}

JavaScript

$(document).ready(function () {
            $('.show').click(function () {
                $('.header-extra').addClass("down"); 
            });
            $('.hide').click(function () {
                $('.header-extra').removeClass("down"); 
            });
        });