JSFiddle - React, Tailwind, and code Playground

by jimmyw404

HTML

<html>
    <head>
        <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");
                
                if(moveMeBox.parentElement == centerBox)
                    rightBox.appendChild(moveMeBox);
                else
                    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 class="centerBox" id="center">
            <div class="boxStyle">static</div>
        </div>

    </body>
</html>