JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row row-centered">
    <div class="col-sm-6 col-centered">
      <div class="text-center">
        <p class="text-center"><b>List 1</b></p>
        <ul class="connectedSortable grilla_off lista ui-sortable"></ul>
      </div>
    </div>
  </div>
</div>

<div class="spacer100"></div>

<div class="container-fluid">
  <div class="row row-centered">
    <div class="col-sm-6 col-centered">
      <div class="text-center">
        <p class="text-center"><b>List 2</b></p>
        <ul class="connectedSortable ui-sortable">
          <li class="ui-sortable-handle">
            <div class="panel panel-default sin-margen">
              <div class="panel-heading panel-mini ot_claro">
                <h4 class="panel-title elemento-en-grilla">
              <a style="margin-left:5px;" class="accordion-toggle letra_chica" data-toggle="collapse" href="#panel0">Element on List</a>
              </h4>
              </div>
              <div id="panel0" class="panel-collapse collapse expandir">
                <div id="color_ot" class="panel-body sin-padding #F7F8E0 elementos_claro">
                  <div class="container-fluid sin-padding-costados">Information</div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

CSS

/* centered columns styles */
.row-centered {
  text-align: center;
}

.col-centered {
  display: inline-block;
  float: none;
  /* reset the text-align */
  text-align: left;
  /* inline-block space fix */
  margin-right: -4px;
  vertical-align: top;
}

.sin-margen {
  margin-bottom: 5px;
}

.sin-padding {
  padding: 5px;
}

.sin-padding-costados {
  padding-left: 0;
  padding-right: 0;
}

.spacer100 {
  height: 100px;
  width: 100%;
  font-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
}

.spacer200 {
  height: 200px;
  width: 100%;
  font-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
}

.letra_chica {
  font-size: small;
}

.letra_mini {
  font-size: xx-small;
}

.elemento-en-grilla {
  padding: 5px;
}

.ot_claro {
  background-color: #F5F5F5 !important;
}

.ot_oscuro {
  background-color: #E9E9E9 !important;
}

.elementos_claro {
  background-color: #F5F5E9 !important;
}

.elementos_oscuro {
  background-color: #E9E9C9 !important;
}

.procesos_claro {
  background-color: #E9F5F5 !important;
}

.procesos_oscuro {
  background-color: #C9E9E9 !important;
}

.connectedSortable {
  list-style-type: none;
  padding: 3px;
  background-color: #ffffff;
  border: 1px solid #e1e1e8;
  border-radius: 4px;
  min-height: 30px;
}

ul.sin_boton {
  list-style-type: none;
}

.ui-sortable-placeholder {
  margin-left: 0 !important;
  border: 3px dashed #770000;
}

.panel-mini {
  padding: 0;
}

body {
  zoom: 180%;
}

JavaScript

$('.connectedSortable').each(function(i, connectedSortable) {
      $(connectedSortable).sortable({
        placeholder: 'ui-sortable-placeholder',
        connectWith: ".connectedSortable",
        helper: 'clone',
        scroll: false,
        start: function(e, ui) {
          ui.placeholder.height(ui.item.height());
        }
      }).disableSelection();
    });