JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rowWrapper">
    <div class="row">
        <input type="checkbox" id="row1" />
        <label for="row1">Option 1</label>
    </div>
    <div class="row">
        <input type="checkbox" id="row2" />
        <label for="row2">Option 2</label>
    </div>
    <div class="row">
        <input type="checkbox" id="row3" />
        <label for="row3">Option 3</label>
    </div>
    <div class="row">
        <input type="checkbox" id="row4" />
        <label for="row4">Option 4</label>
    </div>
    <div class="row">
        <input type="checkbox" id="row5" />
        <label for="row5">Option 5</label>
    </div>
</div>

CSS

body {font-family:Arial; font-size:13px}
.row {width:300px; background:#f2f2f2; border:1px solid #ccc; padding:2px 0 2px 5px; margin-bottom:-1px}
.rowWrapper {position:relative}
label {cursor:pointer}
label:hover {color:red}

JavaScript

$('input').change(function() {
    if ($(this).attr('checked')) {
        var row = $(this).parent();
        var h = row.outerHeight();
        var pos = row.position();
        row.css({
            position: 'absolute',
            left: pos.left,
            top: pos.top
        });
        row.next().css('margin-top', h - 1);
        row.animate({
            top: 0
        }, 300);
        row.next().animate({
            marginTop: -1
        }, 300);
        row.parent().animate({
            paddingTop: h - 1
        }, 300, function() {
            row.parent().css('padding-top', '');
            row.parent().children(':first').before(row);
            row.css('position', 'relative');
            row.siblings().css({
                marginTop: ''
            });
        });

    }
});