JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<button>Toggle</button><button class="reset">Reset</button>
<div style="position:relative">
<div class="parent big">
    <div class="child">
    </div>
</div>
</div>

CSS

.parent {
    background-color: green;
    text-align: center;
    position: relative;
}
.child {
    background-color: red;
    width: 300px;
    height: 100px;
    display: inline-block;
}
.small {
    background-color: yellow;
    width: 100px;
    height: 50px;
    display: inline-block;
}

JavaScript

$(function() {
    $('button:first').click(function() {
        $('.child').stop(true, true).addClass('small', 500, 'easeInExpo', function() {
            $('.parent').stop(true, true).animate({top: 50});
        });
    });
    $('button:eq(1)').click(function() {
        $('.child').stop(true, true).removeClass('small', 500, 'easeInExpo', function() {
            $('.parent').stop(true, true).animate({top: 0});
        });        
    });
});