JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="panel">
    <table class="table table-striped">
        <thead>
            <tr class="placeholder">
                <th colspan=4>My first table</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>@1</td>
                <td>Hello</td>
                <td>i'm</td>
                <td>happy</td>
            </tr>
            <tr>
                <td>@2</td>
                <td>Hi</td>
                <td>i'm</td>
                <td>positive</td>
            </tr>
            <tr>
                <td>@3</td>
                <td>Hello</td>
                <td>i'm</td>
                <td>neutral</td>
            </tr>
            <tr>
                <td>@4</td>
                <td>Bye</td>
                <td>i'm</td>
                <td>unimpressed</td>
            </tr>
            <tr class="placeholder">
                <td colspan="4">You can drag or sort rows here</td>
            </tr>
        </tbody>
    </table>
    <table class="table table-striped">
        <thead>
            <tr class="placeholder">
                <th colspan=4>My second table</th>
            </tr>
        </thead>
        <tbody>
            <tr class="temp"><td></td><td></td><td></td><td></td></tr>
            <tr class="placeholder">
                <td colspan="4">You can drag or sort rows here</td>
            </tr>
        </tbody>
    </table> 
</div>

JavaScript

// Here's where the draggable needs to be dropped and kept.
// The row should be sortable.
// You should not be able to sort/drag placeholder rows.
$(".panel").sortable({ items: 'tr:not(.placeholder)',
                      change: function(event, ui){
                          if(ui.item.hasClass("temp"))
                              return false;
                          if(ui.helper.parent().find('tr').length == 2)
                              ui.helper.parent().prepend('<tr class="temp"><td></td><td></td><td></td><td></td></tr>');        
                      },
                      update: function(event, ui){
                              ui.item.parent().find('tr.temp').remove();    
                          }
                      });