JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Align dropdown to right - allows flexible width</h1>

<ul class="menu" id="menu-right">
  <li>Menu right 1
    <ul>
      <li>Sub A</li>
      <li>Sub B</li>
    </ul>
  </li>
  <li>Menu right 2
    <ul>
      <li>This is suboption A</li>
      <li>This is suboption B</li>
    </ul>
  </li>
</ul>

<h1>Align dropdown to left - how to do with flex width?</h1>

<ul class="menu" id="menu-left">
  <li>Menu left 1
    <ul>
      <li>Sub A</li>
      <li>Sub B</li>
    </ul>
  </li>
  <li>menu left 2
    <ul>
      <li>A long text A</li>
      <li>Another long text</li>
    </ul>
  </li>
</ul>

CSS

/* apply to both */
.menu ul { padding-left: 0px; }
.menu li { list-style-type: none; display: inline-block; padding-left: 0px; margin: 1px; background: #ddd; width: 100px; }
.menu li ul { display: none; }
.menu li:hover > ul { display: block; position: absolute; background: #000; }
.menu li:hover > ul li { display: block; background: #bbb; width: auto; }

/* custom to make submenu left align right */
#menu-left li:hover > ul { width: 150px; margin-left: -50px; }