JSFiddle - React, Tailwind, and code Playground

HTML

<div id="gassi"><p>UNTERER DIV</p></div><div id="gassiover">Ich-beweg-mich-immer-noch-nicht-wie-ich-soll-DIV</div>

CSS

div#gassi {width:280px;height:94px;top:48px;left:0;position:absolute;border:1px solid black;background-color:green;}
div#gassiover {width:280px;height:94px;background-color:red;top:48px;left:0px;position:absolute;z-index:300;border:1px solid black;}

JavaScript

$(document).ready(function(){
    var gassibox = $("#gassiover");
    var gassiboxu = $("#gassi");
    
    gassibox.hover(
    function(){
    $(this).stop().animate({"left": "300px"}, "slow");
    },
    function() {
    $(this).stop().animate({"left": "0"}, "slow");
    });
    gassiboxu.hover(
    function(){
    gassibox.stop().animate({"left": "300px"}, "slow");
    },
    function() {
    gassibox.stop().animate({"left": "0"}, "slow");
    });

});