<div class="container beautiful">
  <div id="0"></div>
  <div id="1"></div>
  <div id="2" style="flex-basis: 20rem;">Click me</div>
  <div id="3"></div>
  <div id="4" style="flex-basis: 30rem;"></div>
  <div id="5"></div>
  <div id="6" style="flex-basis: 5rem;"></div>
  <div id="7"></div>
  <div id="8" style="flex-basis: 5rem;"></div>
  <div id="9"></div>
  <div id="10" style="flex-basis: 2.5em;"></div>
  <div id="11" style="flex-basis: 40rem;"></div>
  <div id="12"></div>
  <div id="13" style="flex-basis: 20rem;"></div>
  <div id="14" style="flex-basis: 20rem;"></div>
  <div id="15"></div>
  <div id="16"></div>
  <div id="17" style="flex-basis: 25rem;"></div>
  <div id="18" style="flex-basis: 2.5rem;"></div>
  <div id="19" style="flex-basis: 25rem;"></div>
  <div id="20"></div>
  <div id="21"></div>
  <div id="22" style="flex-basis: 20rem;"></div>
  <div id="23" style="flex-basis: 5rem;"></div>
</div>

.container{
  display: flex;
  flex-wrap: wrap;
}
.container > div{
  transform-origin: left top;
}


/* To make codepen preatty */
body{
  margin: 0;
  background: #12c2e9;
  background: linear-gradient(45deg, #f64f59, #c471ed, #12c2e9);
  min-height: 100vh;
  font-family: 'Quicksand', sans-serif;
  user-select: none;
}
.beautiful{
  justify-content: center;
  padding: 0.5rem;
}
.beautiful > div{
  flex-grow: 1;
  flex-basis: 10rem;
  max-width: 40rem;
  cursor: pointer;
  background-color: #fff;
  border-radius: 5px;
  height: 10rem;
  margin: 0.5rem;
  box-shadow: 0 1px 8px rgba(0,0,0,0.3);
  opacity: 0.9;

  display: flex;
  align-items:center;
  justify-content: center;
  font-size: 2.5em;
  color: #AAA;
  text-align: center;
  overflow: hidden;
}
.beautiful:blank::before{
  content: "Reload the page";
  color: #FFF;
}

var cards = document.querySelectorAll('.container > div');
var cardsOldInfo = {};
var cardsNewInfo = cardsOldInfo;

cards.forEach((card) => {
  card.addEventListener('click', () => {removeCard(card);});
});

function removeCard(card){
  cardsOldInfo = getCardsInfo();
  card.parentNode.removeChild(card);
  cardsNewInfo = getCardsInfo();
  moveCards();
}

function getCardsInfo(){
  updateCards();
  let cardsInfo = {};
  cards.forEach((card) => {
    var rect = card.getBoundingClientRect();
    cardsInfo[card.id] = {
      "x": rect.left,
      "y": rect.top,
      "width": (rect.right - rect.left)
    };
  });
  return cardsInfo;
}

function moveCards(){
  updateCards();
    cards.forEach((card) => {
      card.animate([ 
        {
          transform: `translate(${cardsOldInfo[card.id].x - cardsNewInfo[card.id].x}px, ${cardsOldInfo[card.id].y -cardsNewInfo[card.id].y}px) scaleX(${cardsOldInfo[card.id].width/cardsNewInfo[card.id].width})`
        }, 
        {
          transform: 'none'
        }
      ], { 
        duration: 250,
        easing: 'ease-out'
      });
  });
}

function updateCards(){
  cards = document.querySelectorAll('.container > div');
}