JSFiddle - React, Tailwind, and code Playground

HTML

<div class="a">
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b">
        <div class="c">
            III
        </div>
    </div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
</div>
<div class="a">
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
</div>
<div class="a">
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
</div>

CSS

.b { background: #BBFFBB;
    width: 24px;
    float: left;
    border-style: solid; 
    height:30px;
    line-height: 30px;
}
.c { background: #D00000 ;
    position: relative;
    left: 12px;
    width:48px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    margin: 3px 3px 3px 3px;
}
.a{
    width: 100%;
    float: left;
}

JavaScript

$('.b').droppable({
        drop:function(event, ui) {
            ui.draggable.detach().appendTo($(this).prev());
        }
});
$('.b').selectable();

$('.c').draggable({
    helper:"clone",
    revert: 'invalid',
    opacity: 0.5,
    grid: [30,36],
});