JSFiddle - React, Tailwind, and code Playground

HTML

<div class="column">
    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
        <div class="portlet-content">One. Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
        <div class="portlet-content">Two. Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
        <div class="portlet-content">Three. Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
</div>
<div class="column">
    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
        <div class="portlet-content">Four. Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
        <div class="portlet-content">Five. Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
</div>

CSS

.column {
    font-size: 10px;
    width: 170px;
    float: left;
    padding-bottom: 100px;
}
.portlet {
    margin: 0 1em 1em 0;
    cursor: pointer;
}
.portlet:hover {
    border-color: #0C0;
}
.portlet-content:hover {
    border-color: #C0C;
}
.portlet-header .ui-icon {
    float: right;
}
.portlet-content {
    padding: 0.8em;
    margin: 0.8em;
    border: 1px solid #CCC;
}
.ui-sortable-placeholder {
    border: 1px dotted black;
    visibility: visible !important;
    height: 50px !important;
}
.ui-sortable-placeholder * {
    visibility: hidden;
}

JavaScript

$(function () {
    $(".column").sortable({
        items: ".portlet",
        connectWith: ".column"
    });
    $(".portlet").sortable({
        items: ".portlet-content",
        connectWith: ".portlet"
    });
    $(".column").disableSelection();
});