JSFiddle - React, Tailwind, and code Playground

HTML

<div id="questionsHolder">
    <div id="question1" class="question">
        1. &nbsp;&nbsp;&nbsp; This is a random question.
    </div>
</div>
    
    <div id="questionSlots"></div>

CSS

.question {
  width: 500px;
  height: 50px;
  margin-top: 25px;
  background: #ebedf2;
  border: 1px solid #333;
  clear: both;
  text-align: center;
  z-index: 200;
}

#questionSlots div {
  margin-top: 25px;
  border-width: 3px;
  border-style: dashed;
  width: 496px;
  height: 46px;
  background: #ddf;
}

#questionSlots div.hovered {
  background: #aaa;
}

JavaScript

$( init );

function init() {
    // Create droppable
			$('<div id="slot1"></div>').appendTo( '#questionSlots' ).droppable( {
			  accept: '#questionsHolder div',
			  hoverClass: 'hovered',
			  drop: handleQuestionDrop
			} )
    
    // Make question draggable
		$("#question1").draggable( {
			cursor: 'move',
			snap: '#content',
			revert: 'invalid'
			} );
    
    function handleQuestionDrop( event, ui ) {
        // Make sure no more questions get dropped at droppable
		// position it directly on top of the slot
		$(this).droppable({ accept: ('#' + $(ui.draggable).attr('id') ) });
        ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
        ui.draggable.draggable( 'option', 'revert', false );
		
	}
	}