JSFiddle - React, Tailwind, and code Playground

HTML

<h1>
a
</h1>
<div id="attach-wrap">
    <div id="attach">... content ...</div>
</div>

CSS

#attach {
    height: 50px;
    width: 60%;
    margin: 0 20%;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    -webkit-transition: margin 0.35s ease, height 0.35s ease, width 0.35s ease;
    -moz-transition: margin 0.35s ease, height 0.35s ease, width 0.35s ease;
    -ms-transition: margin 0.35s ease, height 0.35s ease, width 0.35s ease;
    -o-transition: margin 0.35s ease, height 0.35s ease, width 0.35s ease;
    transition: margin 0.35s ease, height 0.35s ease, width 0.35s ease;
    
}

#attach.stick {
    height: 80px;
    width: 100%;
    border-bottom: 1px solid #000;
    background-color: rgba(250, 250, 250, 1);
    z-index: 100;
    top: 0;
    left:0;
    margin: 0;
    position:fixed;
}

JavaScript

jQuery('body').click(function () {
    $('#attach').toggleClass('stick')
});