JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="allLists">
<span class="list">
<table class="altRow ">
    <thead style="display:block;padding:0px">
    <tr>
        <th style="padding:4px 3px;" width="10">#</th>
        <th style="padding:4px 3px;" width="240">Name</th>
    </tr>
    </thead>
    <tbody class="sortable swimTableTbody" style="display:block;min-height: 25px;">

    </tbody>
</table>

</span>

<span class="list">

<table class="altRow ">
    <thead style="display:block;padding:0px">
    <tr>
        <th style="padding:4px 3px;" width="10">#</th>
        <th style="padding:4px 3px;" width="240">Name</th>
    </tr>
    </thead>
    <tbody class="sortable swimTableTbody" style="display:block;min-height: 25px;">

        <tr id="row_13666">
           <td width="10">&nbsp;</td>
           <td width="240">some content</td>
        </tr>
    </tbody>
</table>
</div>

CSS

#allLists {
    bottom: 12px;
    left: 0;
    position: absolute;
    right: 0;
    top: 10px;
    white-space: nowrap;
}
.swimTableTbody {
    display: block;

    width: 100%;
}
.list {
    display: inline-block;
    width: 300px;
    top: 80px;
    position: relative;
}

JavaScript

$(".sortable").sortable({
       connectWith: ".sortable",
       placeholder: "ui-state-highlight",
       scroll: true,
       helper: function (e, tr) {
           var $originals = tr.children();
           var $helper = tr.clone();
           $helper.children().each(function (index) {
               // Set helper cell sizes to match the original sizes
               $(this).width($originals.eq(index).width());
           });
           $helper.css("background-color", "rgb(223, 240, 249)");
           return $helper;
       }
   });
   $("#sortable").disableSelection();