JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

CSS

ul li {
    background-color:#404040;
    height: 50px;
    width: 100px;
    margin: 5px;
    display: inline-block;
}
ul .placeholder {
    background-color: #cccccc;
    
    /* This also fixes the issue */
    /* height: 1px; */
}

JavaScript

$( "ul" ).sortable({
    placeholder: "placeholder",
    start: function(e, ui) {
        // The following fixes the issue.
        // ui.placeholder.html(" &nbsp; ");
    } 
});