JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
        <div class="picker">
            <div class="choices">
                <div class="choice">
                    <h1>A</h1>
                </div>
                <div class="choice">
                    <h1>B</h1>                   
                </div>
                <div class="choice">
                    <h1>C</h1>
                </div>
            </div>
            <div class="targets">
                <div class="target" id='1'></div>
                <div class="target" id='2'></div>
                <div class="target" id='3'></div>
            </div>
            <div class="clear">
            </div>
        </div>
    </div>

CSS

body{
    font-size:30pt;
    padding:0;
    margin:0;
    font-family:Helvetica Neue, Helvetica, Arial, Sans-serif;
    padding:20px;
}

.targets, .choices{
    float:left;
    width:250px;
    padding:20px 10px;
    min-height:500px;
}

.target, .choice{
    height:60px;
    width:160px;
    margin:20px 0;
    padding:20px;
}

.target{
    border:1px solid black;
}

.choice{
    border:1px solid red;
}

.clear{
    clear:both;
}

JavaScript

$(".choice").draggable({ 
                containment: ".picker",
                cursor: "move",
                revert: "invalid"
            });
            
            $(".target").droppable({
                drop: function( event, ui ) {
                   ui.draggable.position({
                        of: $(this), my: 'left top', at: 'left top'
                    });
                }
            });