JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left">
    <div class="piesa0">
        <img id="ca" src="http://placehold.it/350x350" />
        <div id="dropspot0">DROPSPOT</div>
    </div>
</div>

<div class="right">
         <img class="piese" id="piesa5" src="http://placehold.it/350x350&text=DRAGGABLE" />
</div>

CSS

.left {
    position: absolute;
    left: 5%;
    width: 30%;
    height: 95%;
}

.piesa0 {
    display: block;
    height: 22%;
    margin: 4% auto;
    max-width: 100%;
    border: 3px solid;
}

#ca {
    float:left;
    width: 52%;
    height: 100%;
}

#dropspot0 {
    float:left;
    width: 44%;
    height: 96.5%;
    line-height: 150px;
    text-align: center;
    border: 3px solid;
}

.right {
    position: absolute;
    right: 15%;
    width: 30%;
    height: 95%;
}

.piese {
    display: block;
    height: 22%;
    margin: 5.5% auto;
    max-width: 70%;
}

JavaScript

$(function() {
    $( ".right img" ).draggable
    ({

    revert: "invalid",
    helper: 'clone'
    
    });
    $( "#dropspot0" ).droppable({
        
      tolerance: 'fit',
        
      drop: function( event, ui ) {
         $(ui.draggable).clone().appendTo($("#dropspot0"));
      }
    });
  });