<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>
  display: flex;
  flex-wrap: wrap;
.container > div{
  transform-origin: left top;

/* To make codepen preatty */
  margin: 0;
  background: #12c2e9;
  background: linear-gradient(45deg, #f64f59, #c471ed, #12c2e9);
  min-height: 100vh;
  font-family: 'Quicksand', sans-serif;
  user-select: none;
  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;
  justify-content: center;
  font-size: 2.5em;
  color: #AAA;
  text-align: center;
  overflow: hidden;
  content: "Reload the page";
  color: #FFF;
View Compiled
var cards = document.querySelectorAll('.container > div');
var cardsOldInfo = {};
var cardsNewInfo = cardsOldInfo;

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

function removeCard(card){
  cardsOldInfo = getCardsInfo();
  cardsNewInfo = getCardsInfo();

function getCardsInfo(){
  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(){
    cards.forEach((card) => {
          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');
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.