JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
<div class="live_preview_contents_display1" style="background: teal; overflow: auto;">
    <div id="live_preview" class="livePreview_resumeWrapper2 ui-sortable-handle" style="margin-bottom: 30px; background: lime; overflow: auto;">
    <ul id="sortableResumeDetails" class="noselect ui-sortable" style="background: hotpink; overflow: auto;">

      <li class="ui-state-disabled">
        <div class="live_preview_wrapper noselect resumeStyleWrapper25" dir="ltr" style="direction: ltr;">
          <div class="live_preview_optimisedContainer no_break_inside resumeStyleOptimisedContainer25" dir="ltr" style="direction: ltr;">
            <div id="id_resume_detail_heading" class="live_preview_standardHeadings resumeStyleStandardHeadings25" dir="ltr" style="direction: ltr; white-space: nowrap;">
              Certification Details
              <span class="resume_create_scroll_link no_print" dir="ltr" style="direction: ltr;">
                <span class="spacer"></span>
                <a id="id_resume_create_scroll_link" onclick="goToByScrollMultiple('id_certification_details'); return false;" dir="ltr" style="direction: ltr;">
                  <icon id="id_resume_details_scroll_link" class="fa fa-caret-square-o-up icon_size26" rel="tooltip" title="Resume Details"></icon>
                </a>
              </span>
            </div>
          </div>
          <div class="live_preview_standardContainer resumeStyleStandardContainer25" dir="ltr" style="direction: ltr;">
            <div class="live_preview_standardTableRow resumeStyleStandardTableRow25" dir="ltr" style="direction: ltr;">
              <div class="live_preview_standardLabelContent resumeStyleStandardLabelContent25" dir="ltr" style="direction:...

CSS

#sortableResumeDetails { list-style-type: none; margin: 0; padding: 0; }
#sortableResumeDetails li { margin: 0 5px 5px 5px; padding: 5px; }
html>body #sortableResumeDetails li { line-height: 1.2em; }
.ui-state-highlight { border: 1px dashed #000; background: aqua; }
.ui-sortable-helper { height: 1.5em; line-height: 1.2em; border: 1px dashed #000; background: yellow; color: #fff; position: absolute; }
.ui-state-default:hover { border: 1px dashed #000; background: orange; cursor: pointer; cursor: hand; }
        
.resumeStyleStandardTableRow25 {
    display: table-row
}
.resumeStyleOptimisedContainer25 {
    display: table-row
}
.resumeStyleTopContainer25 {
    display: none
}
.resumeStyleSpecialisedContainer25 {
    display: table-row
}
.resumeStyleStandardContainer25 {
    border: 1px solid transparent;
    padding-top: 10px;
    white-space: wrap;
    width: 100%
}
.resumeStyleStandardHeadings25 {
    border-bottom: 4px solid #000;
    box-shadow: 0 4px 0 #a9a9a9;
    display: table-cell;
    font-weight: 700;
    margin-top: 20px;
    min-height: 25px;
    opacity: .99;
    overflow: hidden;
    page-break-inside: avoid;
    text-transform: uppercase;
    vertical-align: bottom;
    white-space: nowrap;
    width: 100%;
    z-index: 1
}
.resumeStyleStandardLabel25 {
    display: table-cell;
    font-weight: 700;
    height: 100%;
    min-height: 25px;
    overflow: hidden;
    padding: 2px;
    padding-right: 10px;
    vertical-align: top;
    white-space: nowrap
}
.resumeStyleStandardLabelContent25 {
    display: table-cell;
    height: 100%;
    min-height: 25px;
    overflow: hidden;
    padding: 2px;
    vertical-align: top;
    width: 100%
}
.resumeStyleStandardContent25 {
    display: table-cell;
    min-height: 25px;
    overflow: hidden;
    padding: 2px;
    padding-bottom: 20px;
    vertical-align: top;
    width: 100%
}
.resumeStyleStartDateContent25 {
    display: table-cell;
    padding: 2px;
    padding-right: 5px;
    vertical-align:...

JavaScript

$(function() {
            $("#sortableResumeDetails").sortable({
                containment: "parent",
                cursor: "n-resize",
                delay: 100,
                //distance: 2,
                opacity: "0.7",
                placeholder: "ui-state-highlight"
                //scrollSensitivity: 10,
                //scrollSpeed: 80
            });
            $("#sortableResumeDetails").disableSelection();
        });