JSFiddle - React, Tailwind, and code Playground

HTML

<div class="column">
        <div class="thing full">1</div>
        <div class="thing full">2</div>
        <div class="thing full">3</div>
        <div class="thing half">4</div>
        <div class="thing half">5</div>
        <div class="thing half">6</div>
 
</div>
 
<div class="column">
        <div class="thing full">7</div>
        <div class="thing half">8</div>
        <div class="thing full">9</div>
        <div class="thing half">10</div>
        <div class="thing half">11</div>
        <div class="thing full">12</div>
 
</div>

CSS

body { min-width: 520px; padding-top: 30px; padding-left: 30px; }
.column { width: 170px; float: left; padding-bottom: 100px; margin-right: 10px; height: 400px; }

.thing {
    width: 100%;
    height: 50px;
    border: 1px solid orange;
    background: #ffe;
    cursor: move;
}
.thing.full {
    clear: left;
}
.thing.half {
    width: 48%;
    float: left;
}

.placeholder {
    float: left;
    background: #000;
    height: 40px;
   width: 100%;
}

JavaScript

$( ".column" ).sortable({
      connectWith: ".column",
        placeholder: 'placeholder',
        start: function(event, ui) {
            ui.placeholder.height(ui.item.height());
            ui.placeholder.width(ui.item.width());
            ui.item.data('start', ui.item.index());
        }
    });