JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<table class="faq_container expandedT ww" id="sortable1">
    <thead not-sortable>
    <tr>
        <td class="faq_glyph_owner"></td>
        <td class="faq_glyph_owner"></td>
        <td class="faq_text"></td>
        <td class="faq_glyph_owner"></td>
    </tr>
    </thead>
    <tbody not-sortable class="faq_title_container">
    <tr class="faq_title">
        <td></td>
        <td colspan="2">Here is title</td>
        <td></td>
    </tr>
    </tbody>
    <tbody id="2" class="faq_question_container expandedQ">
    <tr class="faq_question">
        <td></td>
        <td></td>
        <td>question oneasddddddddddddddddddddddddddddddddddddddddddd</td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td colspan="2">sub question</td>
    </tr>
    </tbody>
    <tbody id="3" class="faq_question_container expandedQ">
    <tr class="faq_question">
        <td></td>
        <td></td>
        <td>question oneasdd</td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td colspan="2">sub question</td>
    </tr>
    </tbody>
</table>

CSS

table tr{
  border : thin solid black;
    border-collapse: collapse;
}
table{
  border-collapse : collapse;
}

JavaScript

jQuery("#sortable1").sortable({
        items: "tbody:not([not-sortable])",
        cursor: "move",
        zIndex: 9999,
        start: function (event, ui) {
            /*var colW = jQuery(".faq_glyph_owner").width();
            self.textWidth = ui.item.innerWidth() - colW * 3;
            jQuery(".faq_text").width(self.textWidth);
            jQuery("#sortable1").css("table-layout", "fixed");
            ui.item.find("div").parent().width(self.textWidth + colW);*/
        },
        stop: function (event, ui) {
            //jQuery("#sortable1").css("table-layout", "auto");
        }
    });