JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.blocks_holder {
    float: left;
    padding-bottom: 5px;
    width: 282px;
    background: #000;
        height:300;
}
.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;
    color:#fff;
    
}    
.block.highlight {
    border: 1px dashed #ffe45c;
}
.half {
    width: 282px;
}

JavaScript

$(document).ready(function() {
    $(".blocks_holder").sortable({
        connectWith: '.blocks_holder',
        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');
        }
    }); 
});