JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<div>
            <div class="box div1"></div>
            <div class="box div2"></div>
        </div>

CSS

.box{
                width: 100px;
                height: 100px;
                display: inline-block;
            }        
            .div1{
                background: yellow;
                float: left;
            }
            .div2{
                background: pink;
                float: right;
            }        
            body>div { width: 800px; }

JavaScript

$(function () {
                $('.box').hover(function () {
                    $(this).stop(true,true).animate({
                        width: '+=300',
                        height: '+=300'
                    },500);
                }, function () {
                    $(this).stop(true,true).animate({
                        width: '-=300',
                        height: '-=300'
                    },500)
                });
            });