JSFiddle - React, Tailwind, and code Playground

HTML

<div id="rankings">
1 <span class="row sortable"><span>Dog</span></span> <br/>
2 <span class="row"><span>Cat</span></span> <br/>
3 <span class="row sortable"><span>Parrot</span></span> <br/>
4 <span class="row sortable"><span>Gerbil</span></span> <br/>
5 <span class="row sortable"><span>Snake</span></span> <br/>
6 <span class="row"><span>Goldfish</span></span> <br/>
</div>

CSS

#rankings .row {
    display: inline-block;
    margin: 2px 0px 2px 5px;
    padding: 4px 4px;
    display: inline-block;
    border-width: 1px;
}
#rankings .sortable {
    border-width: 1px;
    border: solid;
    border-color: gray;
}

JavaScript

var handleDrop = function(e, ui) {
    var dragged_animal = ui.draggable;
    var to_row = $(this);
    to_row.append(dragged_animal);

    var draggable = ui.draggable.data('draggable');
    draggable.helper[0].style.top = 0 + 'px';
    draggable.helper[0].style.left = 0 + 'px';

}
var handleDrag = function(e, ui) {
    var dragged_animal = ui.draggable;
    var from_row = dragged_animal.parent();

    var to_row = $(this);
    var swapped_animal = to_row.children(':only-child');

    if (!(to_row).is(from_row)) {
        var draggable = ui.draggable.data('draggable');
        top_shift = from_row.offset().top - to_row.offset().top;

        draggable.offset.relative.top -= top_shift;
        to_row.append(dragged_animal);
        from_row.append(swapped_animal);
    }

}
$(function() {
    $('.sortable span').draggable({
        axis: 'y',
        containment: '#rankings',
        stack: '#rankings',
        revert: 'invalid',
    });
});
$(function() {
    $('.sortable').droppable({
        accept: '.sortable span',
        over: handleDrag,
        drop: handleDrop
    });
});