JSFiddle - React, Tailwind, and code Playground

HTML

<div id="status">0,0</div>

<div id="lr"></div>

<div id="header"></div>
<div class="div_container">&nbsp;</div>

CSS

.div_container{
    width: 500px;
    height: 500px;
    background-color: red;
    display: block;
}

JavaScript

var xPrev = 0;
    jQuery(document).ready(function(){

       $(document).mousemove(function(e){
          
          $('#status').html(e.pageX +', '+ e.pageY);
           
       }); 
        
        $(".div_container").mousemove(function(e){
            var relativeXPosition = (e.pageX - this.offsetLeft); //offset -> method allows you to retrieve the current position of an element 'relative' to the document
            var relativeYPosition = (e.pageY - this.offsetTop);
            $("#header").html("<p><strong>X-Position: </strong>"+relativeXPosition+" | <strong>Y-Position: </strong>"+relativeYPosition+"</p>")
                
           xPrev<e.pageX ? $('#lr').html("right") : $('#lr').html("left");
           xPrev=e.pageX;
        }).mouseout(function(){
            $("#header").html("<p>Move mouse on the below blue div container! :)</p>")
        });
    })