JSFiddle - React, Tailwind, and code Playground

HTML

<div class="float right"></div>
<div class="float left"></div>

CSS

.float {
    background: red;
    width: 50px;
    height: 50px;
    margin: 0 10px;
    display: block;
    float: left; 
}

.left {
    background: blue;
    float: right;  
    transition: all 3s;
}

JavaScript

(function(){
    var $plugin = jQuery.sub();
    $plugin.fn.animate = function(props, speed, cb){
        if(typeof(speed) == "function")
            cb = speed, speed = 500;
        if(typeof(cb) != "function")
            cb = function(){};
        return $.each(this, function(i, el){
            el = $(el);
            if(props.float && props.float != el.css("float")){
                var elem = el.clone().css(props).insertBefore(el),
                    temp = (props.float == el.css("float")) ? elem.position().left : el.position().left;
                props.marginLeft = elem.position().left;
                elem.remove();
                el.css({float:"left",marginLeft:temp});
            }
            $(this).animate(props, speed, function(){
                $(this).css(props);
                cb();
            });
        });
    };
    
    $(".float.right").bind("click", function(){
        $plugin(this).animate({float:"right"}, 1000); 
    });
    
    $(".float.left").bind("click", function(){
        $plugin(this).animate({float:"left"}, 1000); 
    });

})();