JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bodywrapper">
<table>
    <tr>
<td>

<a class="button" href="#">
   <ul class="menu">
      <li>test test test</li>
      <li>test test test test test test test test test test test test test test test test test test test</li>
   </ul>
</a>

</td>
</tr>
</table>
</div>

CSS

td{
   width: 80px;
}

.bodywrapper
{
    width:100%;
    position:relative;
}

.button{
      display: inline-block;
      background-color: red;
      width: 10px;
      height: 27px;
      float:left;
    }
    
    .button:focus .menu, .button:active .menu{
      display: block;
    }
    
    .menu{
      display: none;
      position: absolute;
      min-width: 99px;
      max-width: 200px;
      width: auto;
      border: 1px black solid;
      margin-top: 27px;
    float:left;
    }