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 class="drop_applicant">applicant1</div>
<div class="drop_applicant">applicant2</div>
<div class="drop_applicant">applicant3</div>
<div class="drop_applicant">applicant4</div>
<div class="drop_applicant">applicant5</div>
</div>
</td>
<td>
<div class="letterHolder">
<div class="drag_letter">letter1</div> 
<div class="drag_letter">letter2</div> 
<div class="drag_letter">letter3</div> 
<div class="drag_letter">letter4</div> 
<div 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
});


$(".drop_applicant").droppable({
accept: '.drag_letter'
});