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: 805px;
    background: #000;
    color: white;
    line-height: 1.1em;
}
#blocks_holder .ui-state-highlight { 
    border: 1px solid #ffe45c;
    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-color: transparent; /* hide the border, but let it calculate with border */
    padding: 0;
    height: 227px;
}

.short_holder > .block,
.short_holder > .ui-state-highlight,
.short_holder > .block.highlight + .block
{
    position: relative;
    top: -1px;
    left: -1px;
    margin: 0; 
    float: none;
}
.short_holder > .block + .block,
.short_holder > .ui-state-highlight + .block {
    margin: 5px 0 0 0;
    bottom: -1px;
}
.short_holder > .block.highlight + .block + .ui-state-highlight {
    margin: 5px 0 0 0 !important;
    bottom: -1px !important;
}
.block.highlight {
    border: 1px dashed #ffe45c;
}
.half {
    width: 182px;
}
.short_holder.half {
    width: 192px;
}

JavaScript

$(document).ready(function() {
    placeHold = "ui-state-highlight";
    sortStart = function (event, ui) {
            $("."+placeHold)
                .css('width', $(ui.item).css('width'))
                .css('height', $(ui.item).css('height'))
                .css('marginTop', $(ui.item).css('marginTop'))
                .css('marginRight', $(ui.item).css('marginRight'))
                .css('marginBottom', $(ui.item).css('marginBottom'))
                .css('marginLeft', $(ui.item).css('marginLeft'))
                .css('paddingTop', $(ui.item).css('paddingTop'))
                .css('paddingRight', $(ui.item).css('paddingRight'))
                .css('paddingBottom', $(ui.item).css('paddingBottom'))
                .css('paddingLeft', $(ui.item).css('paddingLeft'));
            $(ui.item).addClass('highlight');
        }
    sortStop = function (event, ui) {
            $(ui.item).removeClass('highlight');
        }   
    $("#blocks_holder").sortable({
        placeholder: placeHold,
        start: sortStart,
        stop: sortStop
    }); 
    $(".short_holder").sortable({
        placeholder: placeHold,
        start: sortStart,
        stop: sortStop,
        connectWith: ".short_holder"
    }); 
});