JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>

    <div class="card-stack-container">

      <div class="card-stack-placeholder"></div>    

      <div class="card card1"></div>
      <div class="card card2"></div>
      <div class="card card3"></div>

    </div>

    <div class="card-layoff-container">

      <div class="card-layoff-placeholder"></div>
      <div class="card-layoff-placeholder"></div>
      <div class="card-layoff-placeholder"></div>
      <div class="card-layoff-placeholder"></div>

    </div>


    <div class="card-play-area">

      <div class="card-column-placeholder"></div>
      <div class="card-column-placeholder"></div>
      <div class="card-column-placeholder"></div>
      <div class="card-column-placeholder"></div>

    </div>

CSS

.card-container {
	position: relative;
}

.card-layoff-placeholder,
.card-column-placeholder {
	box-sizing: border-box;
}

.card-layoff-placeholder {
	background-color: rgb(10, 86, 58);
	width: 100px;
	height: 140px;
	border-radius: 5px;
}

.card-column-placeholder {
	border: 1px solid rgb(10, 86, 58);
	width: 110px;
	height: 400px;
	position: relative;
}


.card-column-placeholder.hovered {
	border-color: rgb(84, 86, 10);
}

.card-column-placeholder,
.card-layoff-placeholder {
	float: left;
	margin: 10px 5px;
}

.card-layoff-container {
	overflow: auto;
}

.card-stack-container {
	border: 1px solid rgb(10, 86, 58);
	width: 415px;
	height: 200px;
	padding: 10px;
}

.card {
	background-color: rgb(253, 252, 230);
	width: 98px;
	height: 138px;
	border-radius: 5px;
	position: absolute;
	border: 1px solid orange;
}

.card-stack-container .card {
	float: left;
	position: absolute;
	left: 150px;
}

.card-stack-container .card2 {
	left: 175px;
	background-color: #EEE;
}

.card-stack-container .card3 {
	left: 200px;
	background-color: #DDD;
}


.card-stack-placeholder {
	background-color: rgb(10, 86, 58);
	width: 100px;
	height: 140px;
	border-radius: 5px;
	float: left;
}

.card-column-placeholder .card1 {
	top: 20px;
}

.card-column-placeholder .card2 {
	top: 40px;
}

.card-column-placeholder .card3 {
	top: 60px;
}

JavaScript

$('.card').draggable({
 	revert: 'invalid',
 	drag: handleDrag
 });

 $('.card-column-placeholder').droppable( {
 	accept: '.card',
 	hoverClass: 'hovered',
 	drop: handleCardDrop
 });


 function handleCardDrop(event, ui) {

 	console.log('drop');

 	var length = $(this).find('.card').length;
 	console.log(length);

 	$(ui.draggable).detach()
 		.css({top: 4 + (length * 30),left: 4})
 		.appendTo($(this));

}


function handleDrag(event, ui) {

	var offset = $(this).offset();
	var x = offset.left;
	var y = offset.top;

	var cards = $(this).parent().find(".card");

	console.log(ui.draggable);

	if (cards.length > 1) {

		$(cards).each(function(index, card) {


		});

	}
}