JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<table>
<tr>
<td>
<div class="appHolder">
<div id ="applicant1" class="drop_applicant">applicant1</div>
<div id ="applicant2" class="drop_applicant">applicant2</div>
<div id ="applicant3" class="drop_applicant">applicant3</div>
<div id ="applicant4" class="drop_applicant">applicant4</div>
<div id ="applicant5" class="drop_applicant">applicant5</div>
</div>
</td>
<td>
<div class="letterHolder">
<div id ="letter1" class="drag_letter">letter1</div> 
<div id ="letter2" class="drag_letter">letter2</div> 
<div id ="letter3" class="drag_letter">letter3</div> 
<div id ="letter4" class="drag_letter">letter4</div> 
<div id ="letter5" class="drag_letter">letter5</div> 
</div>
</td>
</tr>
</table>

CSS

.letterHolder, .appHolder {
height: 300px; 
width: 100px;
overflow: auto; 
border: 1px solid #bbb;
padding: 6px 10px;
}

.drop_applicant, .drag_letter {
font-size: 13px;
color: #666;
line-height: 19px; 
}

JavaScript

$(".drag_letter").draggable({
   cursor: 'move',
   revert: true,
   helper: 'clone'   
});


$(".drop_applicant").droppable({
	accept: '.drag_letter',
 drop: function(event, ui){
            alert(ui.draggable.prop("id") + " dropped onto " + $(this).prop("id"));
            console.log('hiii');
        }
        
 });