JSFiddle - React, Tailwind, and code Playground

HTML

<div>
	<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span>
</div>

CSS

div {width:300px;margin:5% auto 0;}
span {position:relative;display:inline-block;vertical-align:top;width:100px;height:100px;text-align:center;font:700 20px/100px sans-serif;color:#879562;background:#e1f8a4;cursor:pointer;}
span {top:0;left:0;box-shadow:0 0 0 1px #fff inset;}
.transition span {transition:all .4s ease-in;}
span.remove {opacity:0;transform:scale(0);}

JavaScript

var span = document.querySelectorAll("span");

function takeOff(e){
	
	span = document.querySelectorAll("span");
	
	var that = e.target,
		parent = that.parentNode,
		i = 0,
		l = span.length,
		thatIndex;
	
	parent.className = "transition";
	that.className = "remove";
	
	for ( ; i<l; i++) if (span[i] === that) thatIndex = i;
	
	var i = thatIndex,
		usedTop, usedLeft;
	
	for( ; i<l; i++){
		usedTop = span[i].offsetTop - parent.offsetTop;
		usedLeft = span[i].offsetLeft - parent.offsetLeft;
		
		if (i+1 < l) {
		
			span[i+1].style.top = (usedTop - span[i+1].offsetTop + parent.offsetTop) + "px";
			span[i+1].style.left = (usedLeft - span[i+1].offsetLeft + parent.offsetLeft) + "px";
		}
	}
	
	setTimeout(function(){
		parent.removeChild(that);
		parent.className = "";
		
		for(var i=0, l=span.length; i<l; i++){
			span[i].style.top = "0";
			span[i].style.left = "0";
		}
	}, 400);
}

for(var i=0, l=span.length; i<l; i++) span[i].addEventListener("click", takeOff, false);