JSFiddle - React, Tailwind, and code Playground

by Bob Wilson

HTML

<div id="ds-holder">
<div class="ds-container">
<div class="ds">
  <span id="dsspan">
   This line is longer than the rest.
   <ul>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
   </ul>  
  </span>
  <a href="example.com">Hover Here</a>
</div>
</div>
 </div>

CSS

#ds-holder { 
position: relative; 
margin: 0 auto; 
width: 700px; 
height: 220px; 
overflow: hidden;
}
.ds-container {
 top: 0px; 
 left: 0px; 
 width: 700px; 
 height: 220px; 
 position: absolute; 
 overflow: hidden;
}
#dsspan{
 background: none repeat scroll 0 0 #F8F8F8;
 border: 5px solid #DFDFDF;
 color: #717171;
 font-size: 13px;
 height: auto;
 width: auto;
 letter-spacing: 1px;
 line-height: 30px;
 margin: 0 auto;
 position: absolute;
 text-align: center;
 text-transform: uppercase;
 top: 80px;
 left:30px;
 display:none;
 padding:0 20px;
}
#dsspan:after{
 content:'';
 position:absolute;
 bottom:-10px;
 height:0px;
}  
.ds {border:1px solid red}
.ds:hover #dsspan { display:block; }