JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="line"><p>All elements should snap to this line if element #1 is positioned here. This imaginary line should always be the left hand side of element #1. In fact, all elements should have their own lines that other elements could snap to.</p></div>
    <div id="element1" class="drag">1</div>
    <div id="element2" class="drag">2</div>
    <div id="element3" class="drag">3</div>
</div>

CSS

#container {
    height:400px;
    background-color:#d3d3d3;
    padding: 0;
    position: relative;
}

.drag-reference {
    border: 1px solid red;
    height: 0;
    position: absolute;
    width: 0;
}
.drag {
    width:100px;
    height:50px;
    text-align:center;
    line-height:50px;
}
#line {
    display: none;
    position:absolute;
    border-left: 2px dashed black;
    margin-left: 10px;
    height:400px;
    width:75%;
}
#line p {
    position: absolute;
    bottom: 10px;
    margin-left: 10px;
}
#element1{
    background-color:red;
}
#element2{
    background-color:yellow;
}
#element3{
    background-color:green;
}

JavaScript

$(function() {
  $('.drag').draggable({
      stop: function (event, ui) {
          // Remove any pre-existing drag references
          $('.drag-reference').remove();
          
          $('.drag').each(function (i, item) {
              var $reference = $('<div>', { 'class': 'drag-reference' });
              var $elem = $(item);
              var $container = $elem.parent();
              var position = $elem.position();
              var top = position.top + 'px';
              var left = position.left + 'px';
              
              console.log('position', position);
              
              $reference.insertBefore($elem);
              $reference.css({
                  top: 0,
                  left: left,
                  height: $container.height()
              });
          });
      },
      containment: 'parent',
      snap: '.drag-reference, .drag'
  });
});