JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div id="wrapper">
	<div id="one" class="column">
        <div class="cool">cool</div>
        <div class="cool">cool2</div>
        <div class="cool">cool3</div>
	</div>
	<div id="two" class="column">
       <div class="cool">zlo</div>
	</div>
</div>

CSS

.column {
  margin-right: 10px;
  background-color: lightgreen;
  width: 250px;
  height: 400px;
  float: left;
}

.column .cool {
  margin-top: 5px;
  margin-left: 5px;
}

.cool {
    width: 240px;
    height: 30px;
    float: left;
    background-color: green;
}

JavaScript

$("#one").sortable({connectWith: "#two"});

$("#two").sortable({connectWith: "#one"});