JSFiddle - React, Tailwind, and code Playground

by AlphaCrack

HTML

<div style="margin: 0px auto; margin-top: 100px; width: 600px; height: 300px; border: 5px solid #000000;">
	<table cellpadding="0" cellspacing="0" border="5" style="width: 100%; height: 100%;">
    	<tr>
        	<td align="center" valign="bottom">
            	<div id="ParentLeft">
                	<div id="RelativeChild">
                    </div>
                </div>
            </td>
            <td align="center" valign="bottom">
            	<div id="ParentRight">
                </div>
            </td>
        </tr>
        <tr>
        	<td colspan="2" style="height: 40px;">
            	<input id="Aleft" type="button" value="AnimateLeft" style="margin-left: 100px;"/>
                <input id="Aright" type="button" value="AnimateRight" style="float: right; margin-right: 100px;"/> 
                <br/>
                <input id="SW" type="button" value="Change Parent"/>
            </td>
        </tr>
    </table>
</div>

CSS

#ParentLeft
{
	width: 200px;
	height: 200px;
	background-color: #333;
}

#ParentRight
{
	width: 200px;
	height: 200px;
	background-color: #333;
}

#RelativeChild
{
	width: 100px;
	height: 100px;
	background-color: #039;
}

JavaScript

function SW()
{
	$("#SW").toggle(function(){
		var element = $("#RelativeChild").detach().appendTo("#ParentRight");
	},
	function(){
		var element = $("#RelativeChild").detach().appendTo("#ParentLeft");
	});
}

	$("#Aleft").click(function(){
		$("#ParentLeft").animate({"margin-bottom":"40"},"slow");
		setTimeout($("#ParentLeft").animate({"margin-bottom":"0"},"slow"), 1000);
	});
	
	$("#Aright").click(function(){
		$("#ParentRight").animate({"margin-bottom":"40"},"slow");
		setTimeout($("#ParentRight").animate({"margin-bottom":"0"},"slow"), 1000);
	});
	
	SW();