JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="markup-value">
  <ul class="category-list ui-sortable">
    <li class="category" note_measure_id="62527" measure_category_id="16">
      <h3 class="handle"><span class="drag-handle ui-sortable-handle"></span><span class="tree-handle"></span><!-- h3--></h3>
      <h3 class="line-heading">First Category</h3>
      <h3 class="line-heading"></h3>
      <h3 class="line-heading"></h3>
      <h3 class="line-heading"></h3>
      <h3 class="line-heading"></h3>
      <h3 class="line-heading"></h3>
      <h3 class="line-heading"></h3>
      <ul class="group-list">
        <li class="group" note_measure_id="62528" measure_group_id="288">
          <h4 class="handle"><span class="drag-handle"></span><span class="tree-handle"></span><!-- h4--></h4>
          <h4 class="line-heading">Group A</h4>
          <h4 class="line-heading"></h4>
          <h4 class="line-heading"></h4>
          <h4 class="line-heading"></h4>
          <h4 class="line-heading"></h4>
          <h4 class="line-heading"></h4>
          <h4 class="line-heading"></h4></li>
        <li class="measure" note_measure_id="62529" measure_id="2936">
          <h5 class="handle" style="width: 20px;"><span class="drag-handle"></span><!-- h5--></h5>
          <h5 class="line-heading" style="width: 351px;">Alpha</h5>
          <h5 class="line-heading" style="width: 155px;"></h5>
          <h5 class="measure-columnline-heading measure-column" note_measure_id="62529" column_id="1" style="width: 105px;"></h5>
          <h5 class="measure-columnline-heading measure-column" note_measure_id="62529" column_id="2" style="width: 105px;"></h5>
          <h5 class="measure-columnline-heading measure-column" note_measure_id="62529" column_id="3" style="width: 106px;"></h5>
          <h5 class="line-heading" style="width: 55px;"></h5>
          <h5 class="line-heading" style="width: 126px;"></h5>
          <!-- li-->
       ...

CSS

.markup-value {
  display: table;
  background-color: #FAFAFA;
  width: 100%;
  box-sizing: border-box;
  min-width: 672px;
  border-collapse: collapse;
}

.markup-value ul.floating-heading {
  display: table-header-group;
}

.markup-value ul.floating-heading li {
  display: table-cell;
  margin: 0;
  border: 2px solid #969696;
  padding: 5px;
}

.markup-value ul.floating-heading li:nth-of-type(1) {
  display: block;
  text-indent: -1000px;
  white-space: nowrap;
  overflow: hidden;
  width: 42px;
  display: table-cell;
}

.markup-value ul.floating-heading li:nth-of-type(1) table,
.markup-value ul.floating-heading li:nth-of-type(1) ol,
.markup-value ul.floating-heading li:nth-of-type(1) ul {
  display: none;
}

.markup-value ul.category-list {
  display: table-row-group;
}

.markup-value ul.category-list li {
  display: table-row;
}

.markup-value ul.category-list li.category {
  background-color: #A3DABE;
}

.markup-value ul.category-list li.group {
  background-color: #B9D9E3;
}

.markup-value ul.category-list li h3,
.markup-value ul.category-list li h4,
.markup-value ul.category-list li h5 {
  display: table-cell;
  margin: 0;
  border: 2px solid #969696;
  padding: 5px;
}

.markup-value ul.category-list li h4:nth-of-type(1),
.markup-value ul.category-list li h4:nth-of-type(2) {
  padding-left: 15px;
}

.markup-value ul.category-list li h5:nth-of-type(1),
.markup-value ul.category-list li h5:nth-of-type(2) {
  padding-left: 25px;
}

.markup-value ul.category-list li .tree-handle,
.markup-value ul.category-list li .drag-handle {
  display: block;
  text-indent: -1000px;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  width: 12px;
  height: 12px;
}

.markup-value ul.category-list li .tree-handle table,
.markup-value ul.category-list li .tree-handle ol,
.markup-value ul.category-list li .tree-handle ul,
.markup-value ul.category-list li .drag-handle table,
.markup-value ul.category-list li .drag-handle ol,
.markup-value ul.category-list li...

JavaScript

$ = jQuery;
var fixDragWidth = function(e, ui) {
  ui.children().each(function() {
    $(this).width($(this).width());
  });
  return ui;
};

$(document).ready(function() {
  $('ul.category-list').sortable({
    handle: '.drag-handle',
    axis: 'y',
    items: 'li.measure',
    //update: patientPhoneReorderHandler,
    helper: fixDragWidth
  });
});