JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul id="sortable" class="sortable-list single">
      <li class="sortable-item">
        <i class="fas fa-arrows-alt handle"></i>
        <input style="display:inline; width:60px;" type="text" name="position" value="1">
        <span style="display:inline">Apple</span>
      </li>
      <li class="sortable-item">
        <i class="fas fa-arrows-alt handle"></i>
        <input style="display:inline; width:60px;" type="text" name="position" value="2">
        <span style="display:inline">Microsoft</span>
      </li>
      <li class="sortable-item">
        <i class="fas fa-arrows-alt handle"></i>
        <input style="display:inline; width:60px;" type="text" name="position" value="3">
        <span style="display:inline">Lenovo</span>
      </li>
      <li class="sortable-item">
        <i class="fas fa-arrows-alt handle"></i>
        <input style="display:inline; width:60px;" type="text" name="position" value="4">
        <span style="display:inline">Acer</span>
      </li>
      <li class="sortable-item">
        <i class="fas fa-arrows-alt handle"></i>
        <input style="display:inline; width:60px;" type="text" name="position" value="5">
        <span style="display:inline">Dell</span>
      </li>
      <li class="sortable-item">
        <i class="fas fa-arrows-alt handle"></i>
        <input style="display:inline; width:60px;" type="text" name="position" value="6">
        <span style="display:inline">HP</span>
      </li>
</ul>

CSS

li{
  list-style:none;
  margin-bottom:5px;
}

JavaScript

$(document).ready(function(){
  $("#sortable-div .sortable-list").sortable({
    connectWith: "#sortable-div .sortable-list",
    placeholder: "placeholder",
    handle: ".handle",

  });


});
$(".sortable-list").sortable();
$( ".sortable-list" ).disableSelection();