JSFiddle - React, Tailwind, and code Playground

HTML

<div class=".container">

  <div class =".column">
    <div class=".draggable-boxes">
      <div class="draggable"></div>
    </div>
  </div>

  <div class =".column">
    <div class=".droppable-container">
      <div class="droppable"></div>
    </div>
  </div>
  
</div>

CSS

.container{
    height: 99%;
}
div{
    display: flex;
}
.column{
    flex: 1;
    flex-direction: column;
    margin: 20px;
}

.draggable-boxes{
    flex-direction: column;
    margin: auto;
}
.draggable{
    flex-direction: row;
    margin: 10px;
    min-height: 40px;
    min-width: 200px;
    max-height: 40px;
    max-width: 200px;
}

.droppable-container{
    margin: auto;
}
.droppable{
    min-height: 400px;
    min-width: 400px;
    max-height: 400px;
    max-width: 400px;
}

JavaScript

$(document).ready(function(){

    $(".draggable").draggable({
        revert: true,
        revertDuration: 0,
        snap: true,
        snapTolerance: 40,
        containment: ".container",

        drag: function( event, ui ) {
            var snapTolerance = $(this).draggable('option', 'snapTolerance');
            var topRemainder = ui.position.top % 40;
            var leftRemainder = ui.position.left % 40;
        
            if (topRemainder <= snapTolerance) {
                ui.position.top = ui.position.top - topRemainder;
            }
        
            if (leftRemainder <= snapTolerance) {
                ui.position.left = ui.position.left - leftRemainder;
            }
        }
    });

    $(".droppable").droppable({
        accept: ".draggable",
        tolerance: "fit",
        drop: function(event, ui) {
            $(ui.draggable).appendTo($(this));
        }
    });

});