JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.2/ckeditor.js"></script>
<div class="rightpanel" id="rightpanel" style="float:right;">
    <div class="htmlblock" block-id="01">draggable element 1</div>
    <div class="htmlblock" block-id="02">draggable element 2</div>
</div>

<div class="maincontent" id="maincontent" style="width: 50%; float: left; min-height: 100px;background: #ccc;">
</div>

CSS

.dragArea {
    width:30px;
    height:30px;
    background:red;
    display:block;
    position:relative;
    top:-20px;
    left:-20px;
}

JavaScript

$(document).ready(function() {
    $("#maincontent").sortable({handle: '.dragArea'});
   
    $( ".htmlblock" ).draggable({
        connectToSortable: "#maincontent",
        helper:'clone',
        revert: "invalid",
        dropOnEmpty: true,
        cursor: 'move'
    });
    
    $("#maincontent").droppable({
        drop: function(event, ui) {
            var blockId = ui.draggable.attr('block-id');
            ui.draggable.html('<p contenteditable="true">I\'m editable!<div class="dragArea"></div></p>');
            ui.draggable.attr('contenteditable','true');
            CKEDITOR.inline( ui.draggable.get( 0 ) );  // this is the line with issues
        },
        over: function(event, ui) {}
    });
});