JSFiddle - React, Tailwind, and code Playground

HTML

<div id="Kolonlar" style="height:500px" class="divKolonlar">

</div>

CSS

.divKolon {width:50px;height:50px;padding:10px;border:3px solid #000000;
    position: absolute !important; background-color: #E98A7E;float:left;}
.divKolonlar{border:3px solid #000000;}
.divBaslik{border:3px solid #000000;}
.divUstKolon {width:50px;height:50px;padding:10px;border:3px solid #DD4B39;  text-align:center;float:left;margin-right:20px;}
.divIcKolon{
    width:auto;
    height:auto;padding:2px;border:0px solid #000000;background-color: #FFFFFF ; text-align:center;float:left;}
.label-danger{

    margin-left:10px;
    margin-top:10px;

}
.inputDiv{
    background-color: #ff7557;
    border:3px solid #000000;
}

JavaScript

EKLE("Deme");
     EKLE("Deneme2");
     
 function EKLE(isim){
     var Kolonlar=document.getElementById("Kolonlar");
     var TasinacakDiv="#Kolonlar";
     var SecilenItem=isim;
     var DisDiv=document.createElement("div");
     var Label=document.createElement("label");
     var Input=document.createElement("div");
     $(Label).text(SecilenItem);
     DisDiv.appendChild(Label);
     DisDiv.appendChild(Input);
     Kolonlar.appendChild(DisDiv);
     $(Input).resizable({
         handles: 'n, e, s, w, ne, se, sw, nw'
     });
     $(Label).attr("style","float:left;text-align:center ;width: 75px");
     $(Input).attr("style","width : 100px;height:35px; float:left;");
     $(Input).attr("name",SecilenItem);
     $(DisDiv).attr("class","divIcKolon ");
     $(Input).attr("class","inputDiv");

     $(DisDiv).draggable({
         containment:TasinacakDiv,
         stop:function(){
             $(this).css("width", "auto");
             $(this).css("height", "auto");
             console.log($(this));
         }
     });

 }