JSFiddle - React, Tailwind, and code Playground

HTML

<div id="move"></div>
<div id="res"></div>
<div id="first"></div>
<div id="line_v"></div>
<div id="line_h"></div>

CSS

#move {top:50px; border: solid 1px black; left:30px; width:100px; height:20px;background-color:#ccc;}
#first {border: solid 1px red;}
#line_v {width: 100px; height: 3px; background-color: black;}
#line_h {width: 3px; height: 100px; background-color: black;}

JavaScript

$(document).ready(function(){    
    $('#move').draggable({
       start: function(e,ui){
           var x0 = ui.position.left;       
           $('#first').html(x0);
           },
       drag: function(e,ui) {
               var x1 = ui.position.left;     
               var x2 = $('div#first').text();
                var res=x1-x2;
                $('#res').html(res);
           
                //$('#line_v').position() = $('#move').position;
                }
            });
    });