JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="inner-wrapper">
        <span id="me">It's me</span>
    </div>
</div>

CSS

#wrapper{
    width:400px;
    height:300px;
    margin-left:auto;
    margin-right:auto;
    margin-top:100px;
    background-color:yellow;}

#inner-wrapper{
    position:absolute;            
    width:100px;
    margin-left:100px;
    margin-top:50px;
    background-color:blue;}

#me{
    background-color:pink;
}

JavaScript

$('#me').mouseenter(function(){
    var $wrapper = $("#wrapper"), $this = $(this);
    alert("distance from middle of span till right border of #wrapper is " + ($wrapper.offset().top - 2* $this.offset().top );

})