JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div id="content">
    <div id="blocks_holder">   
        <div class="block half" style="height: 217px;"></div>
        <div class="block half"></div>
        <div class="block half"></div>
    </div>    
    &nbsp;
</div>

CSS

#blocks_holder {
    float: left;
    padding-bottom: 5px;
    width: 605px;
    background: #000;
    
}
#blocks_holder .ui-state-highlight { 
    margin: 5px 0 0 5px;
    border: 1px solid #ffe45c;
    padding: 5px;
    float: left;
    background: none;
}
.block {
    border: 1px dashed #62B5FD;
    vertical-align: top;
    margin: 5px 0 0 5px;
    float: left;
    padding: 5px;
    display: inline-block;
    min-height: 100px;
    
}    
.block.highlight {
    border: 1px dashed #ffe45c;
}
.half {
    width: 282px;
}

JavaScript

$(document).ready(function() {
    $("#blocks_holder").sortable({
        placeholder: "ui-state-highlight",
        start: function (event, ui) {
            $(".ui-state-highlight")
                .css('width', $(ui.item).css('width'));
            $(".ui-state-highlight")
                .css('height', $(ui.item).css('height'));
            $(ui.item).addClass('highlight');
        },
        stop: function (event, ui) {
            $(ui.item).removeClass('highlight');
        }
    }); 
});