JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr class="item" data-row="<tr>
        <td colspan=2>
            <table>
                <tr>
                    <td>Item 1</td>
                    <td>Description</td>
                </tr>
                <tr>
                    <td>Item 2</td>
                    <td>Description</td>
                </tr>
            </table>
        </td>
    </tr>">
        <td>> Title 2</td>
        <td>Descrn</td>
    </tr>
    <tr class="item" data-row="<tr>
        <td colspan=2>
            <table>
                <tr>
                    <td>Item 3</td>
                    <td>De</td>
                </tr>
                <tr>
                    <td>Item 4</td>
                    <td>Description1231w</td>
                </tr>
            </table>
        </td>
    </tr>">
        <td>> Title 1</td>
        <td>Description1</td>
    </tr>
    
</table>

<button id="sort">sort</button>

CSS

.detail td {
    padding-left : 20px;
}

td {
    border : 1px solid black;
}

td table td {
    border : 0;
}

JavaScript

$(function() {
    $('tr.item').click( function() {
        if ($(this).next().hasClass('detail') )
        {
            $(this).next().remove();
        }
        else 
        {
            $(this).after($($(this).data('row')).addClass('detail'));
        }
     });
    
    
    $('#sort').click(function() {
        $('table tr.detail').remove();
        $('table').append($('table tr').toArray().reverse());
    });
    
});