JSFiddle - React, Tailwind, and code Playground

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").hide('fade').detach().appendTo("#ParentRight").end().show('fade');
    },

    function () {
        var element = $("#RelativeChild").hide('fade').detach().appendTo("#ParentLeft").end().show('fade');
    });
}

$("#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();