<div class="flex flex-col p-4">
  <div class="flex items-center justify-between bg-gray-200 border p-4">
    <p>Container 1</p>
    <span class="fas fa-chevron-down"></span>
  </div>
  <div class="border p-4">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius vel magna lacinia mollis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque ligula neque, imperdiet nec est laoreet, pulvinar commodo odio. Vivamus eget eleifend libero. Fusce dolor nibh, porta eu gravida ut, maximus non erat.
  </div>
  <div class="flex items-center justify-between bg-gray-200 border p-4">
    <p>Container 2</p>
    <span class="fas fa-chevron-up"></span>
  </div>
    <div class="border p-4 hidden">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius vel magna lacinia mollis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque ligula neque, imperdiet nec est laoreet, pulvinar commodo odio. Vivamus eget eleifend libero. Fusce dolor nibh, porta eu gravida ut, maximus non erat.
  </div>
  <div class="flex items-center justify-between bg-gray-200 border p-4">
    <p>Container 3</p>
    <span class="fas fa-chevron-up"></span>
  </div>
    <div class="border p-4 hidden">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius vel magna lacinia mollis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque ligula neque, imperdiet nec est laoreet, pulvinar commodo odio. Vivamus eget eleifend libero. Fusce dolor nibh, porta eu gravida ut, maximus non erat.
  </div>
</div>

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.