JSFiddle - React, Tailwind, and code Playground

HTML

<div class="well grid-guide" style="height: 1123px; width: 794px;" id="droptarget" data-role="droptarget">
    <div class="canvas" id="6182df68-a629-4258-9329-571ea313379b_ui-id-1" style="position: absolute; top: 86px; left: 329px;">
        <div style="padding:5px;border-radius:7px;" class="elementContainer">
            <label class="canvas-span" id="label_6182df68-a629-4258-9329-571ea313379b_ui-id-1">Click here to change
            </label>
            <div class="ui-wrapper" style="overflow: hidden; width: 200px; height: 30px; padding-right: 0px; padding-bottom: 0px;">
                <input style="width: 200px; height: 30px; display: block; margin: 0px; resize: none; position: static; zoom: 1;" class="k-textbox" id="input_6182df68-a629-4258-9329-571ea313379b_ui-id-1">
            </div>
        </div>
    </div>
    <div class="canvas" id="6182df68-a629-4258-9329-571ea313379b_ui-id-2" style="position: absolute; top: 201px; left: 272px;">
        <div style="padding: 5px; border-radius: 7px; cursor: default;" class="elementContainer">
            <label class="canvas-span" id="label_6182df68-a629-4258-9329-571ea313379b_ui-id-2">Click here to change
            </label>
            <div class="ui-wrapper" style="overflow: hidden; width: 200px; height: 30px; padding-right: 0px; padding-bottom: 0px;">
                <input style="width: 200px; height: 30px; display: block; margin: 0px; resize: none; position: static; zoom: 1;" class="k-textbox" id="input_6182df68-a629-4258-9329-571ea313379b_ui-id-2">
            </div>
        </div>
    </div>
        
      
</div>

CSS

body{
    font-family: courier new, courier; 
    font-size: 12px; 
}

#droptarget {
    
    background: #ccc;
    margin: 0 auto;
    position: relative;
}

.canvas{
    border: 1px solid #ccc; 
    display: inline-block; 
    cursor: move;
    position: absolute;         
}

.guide{
    display: none; 
    position: absolute; 
    left: 0; 
    top: 0; 
}

#guide-h{
    border-top: 1px dashed #55f; 
    width: 100%; 
}

#guide-v{
    border-left: 1px dashed #55f; 
    height: 100%; 
}

JavaScript

var MIN_DISTANCE = 10; // minimum distance to "snap" to a guide
var guides = []; // no guides available ... 
var innerOffsetX, innerOffsetY; // we'll use those during drag ... 

$( ".canvas" ).draggable({
    start: function( event, ui ) {
         $("#droptarget").append($("<div id=\"guide-h\" class=\"guide\"></div>"));
         $("#droptarget").append($("<div id=\"guide-v\" class=\"guide\"></div>"));
        guides = $.map( $( ".canvas" ).not( this ), computeGuidesForElement );
        innerOffsetX = event.originalEvent.offsetX;
        innerOffsetY = event.originalEvent.offsetY;
        offset = $(this).offset();
    }, 
    drag: function( event, ui ){
        // iterate all guides, remember the closest h and v guides
        var guideV, guideH, distV = MIN_DISTANCE+1, distH = MIN_DISTANCE+1, offsetV, offsetH; 
        var chosenGuides = { top: { dist: MIN_DISTANCE+1 }, left: { dist: MIN_DISTANCE+1 } }; 
        var $t = $(this); 
        var pos = { top: event.originalEvent.pageY - innerOffsetY, left: event.originalEvent.pageX - innerOffsetX }; 
        var w = $t.outerWidth() - 1; 
        var h = $t.outerHeight() - 1; 
        var elemGuides = computeGuidesForElement( null, pos, w, h ); 
        $.each( guides, function( i, guide ){
            $.each( elemGuides, function( i, elemGuide ){
                if( guide.type == elemGuide.type ){
                    var prop = guide.type == "h"? "top":"left"; 
                    var d = Math.abs( elemGuide[prop] - guide[prop] ); 
                    if( d < chosenGuides[prop].dist ){
                        chosenGuides[prop].dist = d; 
                        chosenGuides[prop].offset = elemGuide[prop] - pos[prop]; 
                        chosenGuides[prop].guide = guide; 
                    }
                }
            } ); 
        } );
        
        if( chosenGuides.top.dist <= MIN_DISTANCE ){
            $( "#guide-h" ).css( "top", chosenGuides.top.guide.top ).show(); 
            ui.position.top =...