<html lang="en">
  <head>
    <style>
      #mousetracker {
        position: absolute;
        left: 0;
        top: 0;
        height: 400px;
        width: 100px;
        padding: 0;
        border: 1px solid;
        box-sizing: border-box;
      }
      #display {
        position: absolute;
        left: 150px;
        top: 50px;
      }
    </style>
    <title>Mouse position tracker</title>
  </head>
<body>
<div id="mousetracker">
  <div style="padding: 160px 5px;">Move mouse here</div>
</div>
<div id="display">
  <b>Div tracking mouse position</b>
  <h2 id="status">
  0, 0
  </h2>
</div>
<script>
  (() => {
    const mouseTracker = document.getElementById('mousetracker');
    mouseTracker.addEventListener('mousemove', (e) => {
      const xPos = e.pageX - mouseTracker.offsetLeft;
      const yPos = e.pageY - mouseTracker.offsetTop;
      document.getElementById('status').innerText = `${xPos}, ${yPos}`;
    });
  })();
</script>
</body>
</html>