JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<div class="menu">
  Menu 
  <div class="dropdown_drawer">
    <div>
      Feature 
    </div>
    <div>
      Price 
    </div>    
  </div>
</div>
 

</body>
</html>

CSS

.menu {
  position: relative;
  border: 1px solid gray;
  display: inline-block;
  margin-left: 100px;
  margin-top: 50px;
  padding: 0.5em;
  cursor: pointer;
  width: 10em;
}

.dropdown_drawer {
  position: absolute;
  background: lightblue;
  width: 10em;
  transition: max-height 1.5s linear;
  /* height: 0; */
  max-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.menu:hover .dropdown_drawer {
  /* height: 10em; */ 
  max-height: 200px;
}