JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<h1>Simple fix based on the old one</h1>
<table id="sort" class="grid" title="Kurt Vonnegut novels">
    <thead>
        <tr><th>Year</th><th>Title</th><th>Grade</th></tr>
    </thead>
    <tbody>
        <tr><td>1969</td><td>Slaughterhouse-Five</td><td>A+</td></tr>
        <tr><td>1952</td><td>Player Piano</td><td>B</td></tr>
        <tr><td>1963</td><td>Cat's Cradle</td><td>A+</td></tr>
        <tr><td>1973</td><td>Breakfast of Champions</td><td>C</td></tr>
        <tr><td>1965</td><td>A lot of words just to make sure this is a large row</td><td>A</td></tr>
    </tbody>
</table>

JavaScript

// Make sure the placeholder has the same with as the orignal
var start = function(e, ui) {
	 	let $originals = ui.helper.children();
    ui.placeholder.children().each(function (index) {
      $(this).width($originals.eq(index).width());
    });
}
// Return a helper with preserved width of cells
var helper = function(e, tr) {
    let $helper = tr.clone();
    let $originals = tr.children();
    $helper.children().each(function (index) {
      $(this).width($originals.eq(index).outerWidth(true));
    });
    return $helper;
};

$("#sort tbody").sortable({
    helper: helper,
    start: start
}).disableSelection();