JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
<div id="square" class="square_class" style="line-height: 300px; height: 200px; width: 200px; background-color: red; vertical-align: bottom;">
 <div>Hello, world!'</div>
</div>
<div>Content Area</div>

<div id="square2" class="square_class" style="line-height: 300px; height: 200px; width: 200px; background-color: red; vertical-align: bottom;">
    <div>Hello, world!'</div>
</div>
<div>Content Area</div>

CSS

.square_class{
    overflow:hidden;
}

JavaScript

$('#square').on('mousedown', function(e) {
    $(this).animate({height:-200},2500);
    $(this).children().animate({"margin-top":"-400px"},2500, function() {
        $(this).css({"margin-top":0})});
});

$('#square2').on('mousedown', function(e) {
    $(this).toggle('slide', {direction: 'up', duration: 2500});
});