JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<div>
  <div>Selected
    <ul class="productGroups">
      <li class="ui-state-default">row1</li>
      <li class="ui-state-default">row2</li>
    </ul>
  </div><div>Others
  <ul class="productGroups decline">
    <li class="ui-state-default">row3</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li class="ui-state-default">row4</li>
    <li...

CSS

.productGroups { list-style-type: none; margin: 0; height: 200px; padding: 0; width: 50%; border: solid 1px #ccc; overflow: auto;}

JavaScript

$(".productGroups").sortable({ connectWith: ".productGroups" });