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;
}
.rightBoxStyle{
height:200px;
width:100px;
border:1px solid #000;
position:absolute;
right:0px;
}
.centerBox{
height:200px;
border:1px solid #000;
margin-right: 110px;
}
</style>
<script type="text/javascript">
function select()
{
var moveMeBox = document.getElementById("moveMe");
var centerBox = document.getElementById("center");
var rightBox = document.getElementById("right");
var newWidth = $('#center').width();
var oldWidth = $('#right').width();
if(moveMeBox.parentElement == centerBox)
{
$('#moveMe').stop(true,true).animate({left: newWidth, width:oldWidth}, 250, function()
{
$(this).css('left', 0);
rightBox.appendChild(moveMeBox);
});
}else{
$('#moveMe').css('position', 'relative')
.stop(true,true).animate({left: -newWidth, width: newWidth}, 250, function()
{
$(this).css('left', 0);
centerBox.appendChild(moveMeBox);
});
}
}
</script>
</head>
<body>
<button type="button" onclick="select()">Select</button>
<div class="rightBoxStyle" id="right">
<div class="boxStyle">static</div>
<div class="boxStyle" id="moveMe">move me</div>
</div>
<div...