JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sort">
	
				<button value='up' >Up</button>
				<button value='down' >Down</button>
		
	</div>
	<div class="sort">
		
				<button value='up' >Up</button>
				<button value='down' >Down</button>
		
	</div>
	<div class="sort">
        
				<button value='up' >Up</button>
				<button value='down' >Down</button>
		
	</div>
	<div class="sort">
		
				<button value='up' >Up</button>
				<button value='down' >Down</button>
		
	</div>

CSS

.LeftFloat
{
    float: left
}
.RightFloat
{
    float: right
}

.FieldContainer
{
    border: 1px solid black;
    width: 400px;
    height: auto;
    font-family:tahoma;
}
 .sort
{
    margin: 3px;
    border: 1px dashed #0da3fd;
    background-color: #e8efff;
    height: 50px;
}
.test div.Commands
{
    width: 60px;
}
button
{
    width: 60px;
}

JavaScript

function moveUp(item) {
    var prev = item.prev();
    if (prev.length == 0)
        return;
    prev.css('z-index', 999).css('position','relative').animate({ top: item.height() }, 250);
    item.css('z-index', 1000).css('position', 'relative').animate({ top: '-' + prev.height() }, 300, function () {
        prev.css('z-index', '').css('top', '').css('position', '');
        item.css('z-index', '').css('top', '').css('position', '');
        item.insertBefore(prev);
    });
}
function moveDown(item) {
    var next = item.next();
    if (next.length == 0)
        return;
    next.css('z-index', 999).css('position', 'relative').animate({ top: '-' + item.height() }, 250);
    item.css('z-index', 1000).css('position', 'relative').animate({ top: next.height() }, 300, function () {
        next.css('z-index', '').css('top', '').css('position', '');
        item.css('z-index', '').css('top', '').css('position', '');
        item.insertAfter(next);
    });
}

$(".FieldContainer").sortable({ items: ".sort", distance: 10 });
$('button').click(function() { 
    var btn = $(this);
    var val = btn.val();
    if (val == 'up')
        moveUp(btn.parents('.sort'));
    else
        moveDown(btn.parents('.sort'));
});