<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!<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ullam ipsam dignissimos perspiciatis consequatur itaque maxime nihil cupiditate veniam. Perferendis!<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ullam ipsam dignissimos perspiciatis consequatur itaque maxime nihil cupiditate veniam. Perferendis!<br><br>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;
}

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

/***** 2) max-height: it works, but requires fixed value *****/

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

.accordion:hover .accordion-body {
  max-height: 200px;
}