JSFiddle - React, Tailwind, and code Playground

by gdoron

HTML

<div id="id1">
        <div id="id2">
        
        </div>
    </div>

CSS

#id1
        {
            background:yellow;
            width:200px;
            height:100px;
            position:relative;
        }
        #id2
        {
            background:red;
            width:100px;
            height:50px;
            position:absolute;
            bottom:0px;
        }

JavaScript

function x() {
    $('#id2').css({
        top: '0'
    }).animate({
        height: "50"
    }, {
        duration: 1000
    });
}

$(function() {
    $('#id2').animate({
        height: "0"
    }, {
        duration: 1000,
        complete: x
    });
});