JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<div id="inventor">
    <ol>
        <li>Alexander Graham Bell</li>
        <li>Thomas Edison</li>
        <li>Nicholas Tesla</li>
    </ol>
</div>
<div id="invention">
<form>
    <ul>
        <li><input name="answer1" />Tesla coil</li>
        <li><input name="answer2" />Telephone</li>
        <li><input name="answer3" />Phonograph</li>
    </ul>
</form>
</div>

CSS

#inventor {
    float:left;
    width:25%;
    border: 1px solid #0000FF;
}
#invention {
    float:left;
    border: 1px solid #00FF00;
    margin-left:10px;
}
#inventor li { z-index: 2; }

JavaScript

$("#inventor li").draggable({
    revert: "valid"
});
    
$("#invention li").droppable({
    drop: function(event, ui) {
        $(this).find("input").val(ui.draggable.text());
        ui.draggable.remove();
    }
});