JSFiddle - React, Tailwind, and code Playground

by Eugen Sunic

HTML

<div class="wrapper">
    <div class="content">
        <div class="button">click me animate</div>
       <div class="buttonz">click me toggle</div> 
    </div>
    <div class="text2">
        <p style="color:white;">Pushing down content only if embeded inside div</p>
    </div>
</div>
<div class="footer"></div>

CSS

body {
    font-family:arial, sans-serif;
}
.wrapper {
    background:blue;
}
.content {
    background:red;
    width:50px;
    min-height:20px;
}
.text {
    background:green;
    height:100px;
}
.button.buttonz {
    background:red;
    color:white;
    padding:0px;
    display:inline-block;
}
.text2 {
    border:2px solid black;
    height:100px;
    position:relative;
}
.footer {
    background:green;
    height:40px;
}

JavaScript

$('.button').on('click', function () {
    $('.text2').animate({
        top: "300px"
   });
});
$('.buttonz').on('click', function () {
    $('.text2').toggle();
     
});