<div class="expand">This cocntent may vary from 50px to 500px</div>
.expand{
  max-width: 100px;
  margin: 0 auto; 
  padding: 30px;
  border-radius: 8px;
  font-size: medium;
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  
}
.expand {
  max-height: 0;
}
.expand:hover {
  background-color: green;
  max-height: 500px;
  transition: max-height 2s;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.