JSFiddle - React, Tailwind, and code Playground

HTML

<button>Try it</button>

<div class='left'></div>
<div class='center'></div>
<div class='right'></div>

CSS

div.center, div.left {
    background: red;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 20px; left: 45%;
}

div.right {
    background: red;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 20px; right: 45%;
}

JavaScript

$('button').click(function(){
    $('div.left').css({top: "20px", left: "45%"});
    $('div.center').css({top: "20px", left: "45%"});
    $('div.right').css({top: "20px", right: "45%"});
    
    $('div.left').animate({top: 410, left: 10}, 300, "easeOutCubic", function(){
        $('div.left').animate({top: 400, left: 20}, 300, "easeOutCubic");
    });
    
    $('div.center').animate({top: 420}, 300, "easeOutCubic", function(){
        $('div.center').animate({top: 400}, 300, "easeOutCubic");
    });
    
    $('div.right').animate({top: 410, right: 10}, 300, "easeOutCubic", function(){
        $('div.right').animate({top: 400, right: 20}, 300, "easeOutCubic");
    });
});