JSFiddle - React, Tailwind, and code Playground

by caub

HTML

<div class="inline">
  <div class="dropdown">
    <button>
      foo
    </button>
    <div class="frame">
      <button class="nowrap">
        ok    
      </button>
      <button class="nowrap">
        long word .    
      </button>
    </div>
  </div>

</div>

CSS

.dropdown { position: relative; }
.dropdown > :last-child {
  position: absolute;
  background-color: #fff;
  top:100%;
  left:0;
  transition: opacity 0.218s;
  border: 1px solid rgba(0,0,0,.2); 
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  z-index: 10;
}

.inline {
  display:inline-block;
}

.frame > button {
  display: block;
  width:100%;
}

.nowrap {white-space: nowrap;}

JavaScript

window.addEventListener('mousedown',e=>console.log('m down'));
window.addEventListener('mouseup',e=>console.log('m up'));
window.addEventListener('click',e=>console.log('m click'));