JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
    <div id="blocks_holder">   
        <div class="block half" style="height: 217px;">1</div>
        <div class="block half short_holder">
           <div class="block half">2</div>
           <div class="block half">3</div>
        </div>
        <div class="block half short_holder">
           <div class="block half">4</div>
           <div class="block half">5</div>
        </div>
        <div class="block half" style="height: 217px;">6</div>
    </div>    
    &nbsp;
</div>

CSS

#blocks_holder {
    float: left;
    padding-bottom: 5px;
    width: 605px;
    background: #000;
    color: white;
    line-height: 1.1em;
}
#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;  
} 

.short_holder {
    border: 0; 
    padding: 0;
}
.short_holder.half {
    width: 294px;
    overflow: visible;
}
.short_holder > .block {
    margin: 0; 
}
.short_holder > .block + .block {
    margin: 5px 0 0 0;
}
.block.highlight {
    border: 1px dashed #ffe45c;
}
.half {
    width: 282px;
}

JavaScript

$(document).ready(function() {
    placeHold = "ui-state-highlight";
    sortStart = function (event, ui) {
            $("."+placeHold)
                .css('width', $(ui.item).css('width'));
            $("."+placeHold)
                .css('height', $(ui.item).css('height'));
            $(ui.item).addClass('highlight');
        }
    sortStop = function (event, ui) {
            $(ui.item).removeClass('highlight');
        }   
    $("#blocks_holder").sortable({
        placeholder: placeHold,
        start: sortStart,
        stop: sortStop,
        cancel: ".short_holder" /* this allows it to be a drop target, but prevents this wrapping element block from being moved as a group sorted itself */
    }); 
    $(".short_holder").sortable({
        placeholder: placeHold,
        start: sortStart,
        stop: sortStop,
        connectWith: ".short_holder"
    }); 
});