JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
    <div id="vowels">
      <span class="vowel">A</span>
      <span class="vowel">E</span>
      <span class="vowel">I</span>
      <span class="vowel">O</span>
      <span class="vowel">U</span>
      <span class="vowel">Y</span>
    </div>
    <div id="words">
      <div class="word">
        <span class="consonant">H</span>
        <span class="consonant">P</span>
        <span class="consonant">P</span>
      </div>
      <div class="word">
        <span class="consonant">B</span>
        <span class="consonant">S</span>
        <span class="consonant">H</span>
        <span class="consonant">F</span>
        <span class="consonant">L</span>
      </div>
      <div class="word">
        <span class="consonant">D</span>
        <span class="consonant">C</span>
      </div>
      <div class="word">
        <span class="consonant">G</span>
        <span class="consonant">R</span>
        <span class="consonant">M</span>
        <span class="consonant">P</span>
      </div>
      <div class="word">
        <span class="consonant">D</span>
        <span class="consonant">P</span>
      </div>
      <div class="word">
        <span class="consonant">S</span>
        <span class="consonant">N</span>
        <span class="consonant">Z</span>
      </div>
      <div class="word">
        <span class="consonant">S</span>
        <span class="consonant">L</span>
        <span class="consonant">P</span>
      </div>

CSS

span {
        display: inline-block;
        width: 1em;
        text-align: center;
        border: 1px solid;
        background: white;
        margin: 0 4px;
      }
      .vowel { color: red }
      .vowel:hover {
        cursor: pointer;
        background: red;
        color: white;
      }
      .word { padding: 5px }
      #words, #vowels{
        float: left;
        clear: both;
        padding: 5px;
        margin: 5px;
      }
      #words { border: 1px solid black }
      #vowels { border: 2px solid red }
      #vowels .placeholder {
        display: none;
      }
      .word .placeholder {
        width: 4px;
        margin: -2px;
        background: pink;
        height: 1em;
        border: none;
      }

JavaScript

$(function() {
    $('#vowels,.word').disableSelection().sortable({
        cursor: 'pointer',
        placeholder: 'placeholder',
        cancel: '.consonant',
        helper: 'clone',
        appendTo: 'body',
        stop: function(event, ui) {
            var $uiItem = $(ui.item);
            if ($uiItem.parent().is('#vowels')) $uiItem.remove();
        }
    }).sortable(
       "option", "connectWith", '#vowels,.word' 
    );
    $('#vowels').bind('sortstart', function(event, ui) {
        var $uiItem = $(ui.item);
        $uiItem.clone().show().insertBefore($uiItem);
    });
});