JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
.boxStyle{
border:1px solid #000;
margin-bottom: 5px;
}
.rightBoxStyle{
height:200px;
width:100px;
border:1px solid #000;
position:absolute;
right:0px;
}
.centerBox{
height:200px;
border:1px solid #000;
margin-right: 107px;
}
</style>
<script type="text/javascript">
function select()
{
var moveMeBox = document.getElementById("moveMe");
var centerBox = document.getElementById("center");
var newWidth = $('#center').width() - 2;
var oldWidth = $('#right').width() - 2;
var centerRightMargin = 8;
if(moveMeBox.parentElement == centerBox)
{
var newLeft = newWidth + centerRightMargin;
var boxCountDifference = 2;
var marginSize = 7;
var newTop = boxCountDifference * ($('#someStaticBox').height() + marginSize);
$('#moveMe').stop(true,true).animate({left: newLeft, top: newTop, width:oldWidth}, 3000, function()
{
$(this).css('left', 0);
$(this).css('top', 0);
$("#aboveStaticBox").after($('#moveMe'));
});
var shiftAmount = $('#someStaticBox').height() + marginSize;
$('#belowStaticBox').css('position', 'relative')
.stop(true,true).animate({top: shiftAmount}, 3000, function()
...