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;
}
.drag {
    width:100px;
    height:50px;
    margin:10px;
    text-align:center;
    line-height:50px;
}
#line {
    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({
    containment: 'parent',
    snap: true
  });
});