<button id="button">Open Box</button>

<br />
<br />

<div id="box" class="box" style="display: none">
  <div class="inner">
    “If I find in myself a desire which no experience in this world can satisfy,
    the most probable explanation is that I was made for another world. If none
    of my earthly pleasures satisfy it, that does not prove that the universe is
    a fraud.” - C.S. Lewis
  </div>
</div>

.box {
  overflow: hidden;
  background: pink;
  color: red;
  width: 200px;
  transition: height 2s;
}

.inner {
  padding: 1rem;
}

:root {
    --blue: #4299e1;
    --darkblue: #2b6cb0;
}

div {
  text-align: center;
}

div span {
  margin: 0 auto;
}

* {
    font-size: 25px;
    font-family: 'Nunito', sans-serif;
}


document.getElementById('button').addEventListener('click', () => {
  const box = document.querySelector('.box');

  // RESET : START
  box.style.display = 'none';
  box.style.height = '';
  // RESET : END

  box.style.display = '';

  // Measure the actual height.
  const height = `${box.clientHeight}px`;

  box.style.height = '0px';

  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      box.style.height = height;
    });
  });
});

External CSS

  1. https://fonts.googleapis.com/css?family=Nunito:400,800,900

External JavaScript

This Pen doesn't use any external JavaScript resources.