<div class="accordion">
  <div class="accordion-title">Hover me!</div>
  <div class="accordion-body">
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ullam ipsam dignissimos perspiciatis consequatur itaque maxime nihil cupiditate veniam. Perferendis!</p>
    </div>
  </div>
</div>

/* See: https://www.youtube.com/watch?v=Og4Wuahm6es */

/****** colors/typography ******/
*,
*::before,
*::after {
  box-sizing: border-box;
}

.accordion {
  max-width: 500px;
  background-color: black;

  font-family: system-ui;
  color: white;

  border-bottom: 5px solid limegreen;
  cursor: pointer;
}

.accordion-title {
  font-weight: 700;
  font-size: 1.5rem;
  padding: 1rem;
}

.accordion-body {
  padding-inline: 1rem;
}

/**********************************/

/***** 1) height: not working *****/

.accordion-body {
  height: 0;
  transition: 500ms height ease;
}

.accordion:hover .accordion-body {
  height: auto;
}