JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.1/dragula.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.1/dragula.min.css">
<div class="wrapper">
  <div id="left" class="container">
    <div class="item"><span>Item 1</span></div>
    <div class="item"><span>Item 2</span></div>
    <div class="item"><span>Item 3</span></div>
    <div class="item"><span>Item 4</span></div>
  </div>
  <div class="container"></div>
  <div class="right"><span>More text goes in this box over here.</span></div>
  <div class="right"><span>More text goes in this box over here.</span></div>
  <div class="right"><span>More text goes in this box over here.</span></div>
  <div class="right"><span>More text goes in this box over here.</span></div>
</div>

CSS

body {
  background-color: #FFFFFF;
  margin: 0 auto;
  max-width: 740px;
}

.wrapper {
  display: table;
}

.container {
  display: table-cell;
}

.container:nth-child(odd) {
  background-color: #4D5D94;
}

.item {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  border: 1px solid #4D5D94;
  background-color: #FFFFFF;
  width: 200px;
  height: 70px;
  padding-left: 25px;
  padding-right: 25px;
  line-height: 70px;
  text-align: center;
}

.item > span {
  display: inline-block;
  vertical-align: middle;
  line-height: 20px;
}

.item + .item {
border-top: 1px solid transparent;
}

.right {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  border: 1px solid #4D5D94;
  border-left: 1px solid transparent;
  background-color: #FFFFFF;
  width: 400px;
  height: 70px;
  padding-left: 45px;
  padding-right: 45px;
  line-height: 70px;
  text-align: center;
  user-drag: none; 
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  cursor: default;
}

.right + .right {
border-top: 1px solid transparent;
}

.right > span {
  display: inline-block;
  vertical-align: middle;
  line-height: 20px;
}

.container > div,
.gu-mirror {
  transition: opacity 0.4s ease-in-out;
}

.container > div {
  cursor: move;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}
.gu-mirror {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}

.gu-transit {
  width: 200px;
  height: 70px;
  padding-left: 25px;
  padding-right: 25px;
  color: #4D5D94; 
}

.gu-mirror {
color: red;
}

JavaScript

var items = [];

dragula([$("#left").get(0)])
.on("dragend", function(el, target, src) {
	items = []; // reset items
	$(".item").each(function(idx, item) {
  	items.push($(item).text());
  });
  
  console.log(items);

});