JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="cardsort">
  <li class="active">
    <h2>Element #1</h2>
    <div class="content">
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam.</p>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam.</p>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam.</p>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam.</p>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam.</p>
    </div>
  </li>
  <li>
    <h2>Element #2</h2>
    <div class="content">
      <p>Et harum quidem rerum facilis est et expedita distinctio. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p><p>Eaque ipsa quae ab illo inventore veritatis et quasi....

CSS

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body {
  background: #EEE;
  font: 16px/1.5 Helvetica Neue, sans-serif;
  padding: 0;
  margin: 0;
}

h2 {
  margin: 0;
}

#cardsort {
  margin: 0;
  padding: 0;
  position: relative;
}

#cardsort li {
  border-bottom: 1px solid #DDD;
  background: #FFF;
  padding: 1em;
  cursor: pointer;
  width: 100%;
  -webkit-transition: height 0.25s;
}

#cardsort .content  {
  display: none;
}

#cardsort li.active {
  height: 200px;
  cursor: default;
}

#cardsort li.active .content {
  display: block;
}

JavaScript

$(function() {
	$('#cardsort li').on('click', function(e) {
  
	  var $target = $(e.currentTarget);
    var parent = $target.parent();
    var children = parent.children();
    
    $.each(children, function() { $(this).css('top', $(this).offset().top); });
    children.css('position', 'absolute');
    children.removeClass('active');
    
    var childs = children.toArray();
    childs.push(childs.shift());
    childs.splice(0, 0, childs.splice($target.index()-1, 1)[0]);
    var offset = 0;
    var $activeChild;
    $.each(childs, function(index) {
    	if(index == 0) {
        offset = 0;
        $(this).addClass('active');
        $activeChild = $(this);
      } else {
        offset = (index-1) * $(this).outerHeight() + $activeChild.outerHeight()
      }
      $(this).parent().append(this);
      $(this).animate({ 'top' : offset });
    });
  });
});