JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul id="sortable" style='width:400px'>
  <li not-sortable class='ui-state-default'>
  <b>Not sortable title</b>
  </li>
  <li class="ui-state-default">
    <table>
      <tr><td>Question</td></tr>
      <tr><td>Subquestion</td></tr>
    </table>
  </li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3: this item is really really really long</li>
  <li class="ui-state-default">Item 4</li>
</ul>

CSS

#sortable {
    list-style-type: none;
}

JavaScript

$(function() {
    $( "#sortable" ).sortable({
    		items: 'li:not([not-sortable])',
    		cursor: 'move',
        zIndex: 9999,
        // ... rest of options you want to set
    });
});