JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item">
    <div class="content">1: Some text</div>
    <div class="move">
        <div class="move-down">down</div>
    </div>
</div>
<div class="item">
    <div class="content">2: Some other text</div>
    <div class="move">
        <div class="move-up">up</div>
        <div class="move-down">down</div>
    </div>
</div>
<div class="item">
    <div class="content">3: Some text</div>
    <div class="move">
        <div class="move-up">up</div>
        <div class="move-down">down</div>
    </div>
</div>
<div class="item">
    <div class="content">4: Some other text</div>
    <div class="move">
        <div class="move-up">up</div>
    </div>
</div>

CSS

div {height: 2em; display: inline-block;}
div.content {max-width: 10em;}
div.item {width: 20em; border: 1px dotted green; display: block;}
div.move {width: 10em; float: right;}
div.move > div {float: left; padding-left: 1em;}

JavaScript

$(document).ready(function () {
    $('.move-down').click(function (e) {
        var self = $(this),
            item = self.parents('div.item'),
            swapWith = item.next();
        item.before(swapWith.detach());
    });
    $('.move-up').click(function (e) {
        var self = $(this),
            item = self.parents('div.item'),
            swapWith = item.prev();
        item.after(swapWith.detach());
    });
});