<div class="wrapper">
  <details>
    <summary>
      Click me to see more details
    </summary>

    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eum perferendis eius. Adipisci velit et similique earum quas illo odio rerum optio, quis, expedita assumenda enim dicta aliquam porro maxime minima sed a ullam, aspernatur corporis.
    </p>
  </details>
</div>
.wrapper {
  padding: 30px;
  display: flex;
  justify-content: center;
}

details {
  width: 100%;
  max-width: 500px;
}

summary {
  background: #f2f2f2;
  cursor: pointer;
  padding: 15px;
}

p {
  padding: 15px;
  margin: 0;
  background: #f2f2f2;
}

External CSS

  1. https://codepen.io/denic/pen/YzyPzKG.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

  1. https://codepen.io/denic/pen/YzyPzKG.js