JSFiddle - React, Tailwind, and code Playground

by vlit

HTML

<div class="cnt">
   <div class="unn">
     <div>
       1111111111111111111111111111111111111111111111111111111
     </div>

     <div>
       <div>
         1
       </div>
       <div>
         2
       </div>
       <div>
         3
       </div>
     </div>

   </div>

   ghfghfgh gfh g ghg hgf hfg hfgh fgh fgghg hgf hfg hfgh fgh fgghg hgf hfg hfgh fgh fgghg hgf hfg hfgh fgh fgghg hgf hfg hfgh fgh fgghg hgf hfg hfgh fgh fgghg hgf hfg hfgh fgh fgghg hgf hfg hfgh fgh fgghg hgf hfg hfgh fgh fgghg hgf hfg hfgh fgh fgghg hgf hfg hfgh fgh fgghg hgf hfg hfgh fgh fgghg hgf hfg hfgh fgh fgghg hgf hfg hfgh fgh fgghg hgf hfg hfgh fgh fgghg hgf hfg hfgh fgh fgghg hgf hfg hfgh fgh fgghg hgf hfg hfgh fgh fgghg hgf hfg hfgh fgh fgghg hgf hfg hfgh fgh fgghg hgf hfg hfgh fgh fgghg hgf hfg hfgh fgh fg.
 </div>

CSS

.cnt {
  margin: 0 auto 0;
  max-width: 600px;
  min-width: 280px;
}
.unn>div:last-child {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  }
.unn div{
padding: 20px;
border: 1px solid #ccc;
}
.unn div:first-child{
border-bottom: 1px solid #ccc;
}
.unn>div:last-child div{
width: 33.333333%;
}


.unn>div:last-child{
  height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  transition: all 0.5s;
}
.unn:hover>div:last-child {
  /* transition-delay: 0.5s; */
  opacity: 1;
  overflow: initial;
  padding: 20px;
  height: auto;
   transition: all 0.5s;
}