JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top1"><div id="bot1"></div></div>
<div id="top2"><div id="bot2"></div></div>

CSS

#top1 {
    height: 200px;
    width: 300px;
    position: absolute;
    background: green;
    z-index: 10;
}
#bot1 {
    height: 100px;
    width: 200px;
    background: blue;
    position: absolute;
    z-index: 11;
}
#top2 {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 9;
    background: grey;
}
#bot2 {
    height: 300px;
    width: 100px;
    background: red;
    position: absolute;
    z-index: 12;
}

JavaScript

$(function() {
    $('#bot2').hover(function() {
        $(this).appendTo('#top1');
    }, function() {
        $(this).appendTo('#top2');
    });
});