JSFiddle - React, Tailwind, and code Playground

HTML

<button id="button1">toggle state</button>
<button id="button2">toggle state and change position of container</button>
<div id="container" class="container">
    <div class="other_container">
         <img src="http://jsfiddle.net/img/logo.png">
    </div>
   
    <div class="box">
    </div>
    
</div>

CSS

#container {
    position:fixed; left:100px; top:100px;
}
#container.some_state_position {
    position:absolute;
}
.box {
    width:100px; height:100px;
    background:blue;
}

.some_state .box {
    background:red; width:50px; height:50px;
}

img, .box  {
        -webkit-transition:all 1.5s ease;
    -moz-transition:all 1.5s ease;
    -ms-transition:all 1.5s ease;
    transition:all 1.5s ease;
}
img {width:100%;}
.some_state .other_container img {
    width:50%;
}

JavaScript

$("#button1").on({
    click: function() {
        $("#container").toggleClass("some_state");
    }

});

$("#button2").on({
    click: function() {
        $("#container").toggleClass("some_state");

        setTimeout(function() {
            $("#container").toggleClass("some_state_position");
        }, 50);
    }
});