JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu-item-container vert-menu" style="top: 22px; display: inline;">
  <div class="menu-item menu-item-vert">
  <span class="menu-item-label">New...</span>
  <span class="menu-item-shortcut">Ctr+N</span>
  </div>
  <div class="menu-item menu-item-vert">
    <div class="menu-item-container vert-menu" style="top: -22px; display: inline; left: 180px;">
      <div class="menu-item menu-item-vert">
      <span class="menu-item-label">File</span>
      <span class="menu-item-shortcut">Alt+ F</span>
      </div>
      <div class="menu-item menu-item-vert">
<span class="menu-item-label">Long text that screws up the shortcut</span>
<span class="menu-item-shortcut">Shift+Del</span>
     </div>
    </div>
    <span class="menu-item-label">Add</span>
    <span class="menu-item-shortcut">▶</span>
    </div>
</div>

CSS

.menu-item-container {}

.vert-menu {
  position: absolute;
  min-width: 180px;
  border: #aaa 1px solid;
  background: white;
  
}

.menu-item-vert {
  float: none;
 }

.menu-item {
  font: 13px Arial, sans-serif;
  height:13px;
  color: black;
  padding: 3px 7px 5px 7px;
  white-space: nowrap;
  position: relative;
  background: white;
 }

.menu-item-shortcut {
 
  padding: 0px 0px 0px 24px;
  position: relative;
  color: #777;
  left: auto;
  right: 5px;
  direction: ltr;
  text-align: right;
}
.menu-item-label {
  
  position: relative;
 }