JSFiddle - React, Tailwind, and code Playground

by Alexander Zonov

HTML

<div class="wrapper">
    <div class="crutch">
        <div class="block red square"></div>
    </div>
</div>

CSS

.red {
    background-color: red;
}

.square {
    height: 200px; width: 200px;
}

.wrapper {
    display: inline-block;
    padding: 10px;
    border: 1px solid black;
}

JavaScript

var wrapper = $('.wrapper');

wrapper.css('height', wrapper.height());
$('.block').animate({'height': 0}, 2000, function(){
    wrapper.animate({'height': $('.crutch').height()}, 2000, function(){
        wrapper.css('height', 'auto');
        $('.block').animate({'height': '200px'}, 2000);
    });
});