JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <div class='row'>           
            <div class='itemname'>If I drag underneath this text it I can sort, but on this text won't work</div>
            <div class='sorthandle'></div>
        </div>
    </li>
</ul>

CSS

li {
    width: 400px;
    height:30px;    
}

.row {
    border:1px solid black;
    height: 30px;
    width: 400px;
}

.itemname { 
    font-size: 12px;
    position: absolute;
    width: 400px;    
}

.sorthandle {
    position:absolute;
    margin-left:0px;
    width:200px;
    height:30px;
    cursor: pointer; 
    border: 1px solid green;
}

JavaScript

$("ul").sortable({
    handle: ".sorthandle",
});