JSFiddle - React, Tailwind, and code Playground

HTML

<div id="square1"></div>
<div id="square2" class="s1"></div>

CSS

#square1 {
    width: 100px;
    height: 100px;        
    position: absolute;
    left: 0;
    top: 0;
    background: blue;
    cursor: pointer;
}
#square2 {
    position: absolute;
}
.s1 {
    width: 100px;
    height: 100px;        
    background: white;
    display: hidden;
    position: absolute;
    left: 150px;
    top: 150px;    
}
.s2 {
    display: block;
    background: red;
    width: 50px;
    height: 50px;
    left: 175px;
    top: 175px;    
    -moz-transition: width 2s, height 2s, left 2s, top 2s;
}

JavaScript

$("#square1").on("click", function() {
    $("#square2").removeClass("s1").addClass("s2");
})