<div class="accordion">
  <div class="accordion-header">
    <h2>Hover Me!</h2>
  </div>
  <div class="accordion-body">
    <div class="overflow-hidden">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit
      provident nihil placeat a ipsa voluptas dolores quo harum maxime aut
      itaque aliquam earum sed, ad, accusantium quas dignissimos asperiores
      odio! Quas voluptatem dolorem ratione harum fugiat, pariatur
      laudantium eligendi nostrum, veniam et, sed officia minus quasi!
      Inventore accusamus neque laudantium tenetur accusantium fuga ea optio
      reprehenderit sapiente quam.
    </div>
  </div>
</div>
* {
  padding: 0;
  margin: 0;
}
body {
  display: grid;
  place-content: center;
}
.accordion {
  width: 300px;
  border-bottom: greenyellow solid 10px;
  background-color: #000;
  color: #fff;
}
.accordion-header {
  padding: 10px;
  cursor: pointer;
  font-size: 26px;
}
.accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  padding-inline: 1em;
  transition: grid-template-rows 0.3s ease;
}
.accordion:hover .accordion-body {
  grid-template-rows: 1fr;
}
.overflow-hidden {
  overflow: hidden;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.