JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tst" class="clear">
    <div class="foo">A</div>
    <div class="foo">B</div>
    <div class="foo">C</div>
    <p style="clear: both;">
    below animated items...
    </p>
</div>

CSS

/*
    ClearFix Hack based on slightly enhanced, universal clearfix hack 
    http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack 
    
    only touch if you really know what you are doing.
*/

.clear:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clear { display: inline-block; }
/* start commented backslash hack \*/
* html .clear { height: 1%; }
.clear { display: block; }
/* close commented backslash hack */

/* -- end clearfix hack */
#tst
{
    background: #080;
}
div.foo
{
    background: #008;
    color: white;
    width: 100px;
    height: 100px;
    float: left;
    clear: left;
    margin: 10px;
}

div.bar
{
    background: #800;
    color: white;
    margin: 10px;
}

JavaScript

var adjust = 0;
var yPos = 0;    
$("#tst div.foo").each(function()
{
    var $foo = $(this);
    
    var pos = $foo.offset();
    
    var w = $foo.width();
    var h = $foo.height();
    
    var $bar = $('<div class="bar"/>').css({
        position: "absolute",
        left: pos.left,
        top: pos.top,
        width: w,
        height: h,
        opacity: 0,
        zIndex: 20
    });
    
    $foo.animate({height: 10},{duration: 800, complete: function()
    {
        $bar.css({position: null, left: null, top: null});
        $foo.replaceWith($bar);
    }});
    


    //$foo.replaceWith($bar);
    $bar.animate({top: yPos, height: 10, opacity: 1.0}, {duration: 800, queue: false});

    yPos += 20;
});