JSFiddle - React, Tailwind, and code Playground

HTML

<p class="intro">
flyout menu w/ adjusting height<br/>
left menu must adjust in height to match submenu that appears to the right.
</p>

<ul class="menuList">
  <li>
    <a href="#">Category 1</a>
    <div class="subMenu">
      <ul class="submenuList">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 1</a></li>
        </ul>
    </div>
  </li>
  <li>
    <a href="#">Category 2</a>
    <div class="subMenu">
      <ul class="submenuList">
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 2</a></li>
      </ul>
    </div>
  </li>
</ul>

CSS

body {
  margin: 15px;
}

.into {
  margin: 10px 0;
}

.menuList {
  list-style: none;
  position: relative;
  padding: 0;
  margin: 0;
}

.menuList > li {
  background: white;
  border-right: 1px solid blue;
  width: 150px;
}

.subMenu {
  display: none;
  position: absolute;
  top: 0;
  left: 151px;
  background: pink;
  width: 400px;
}

.submenuList {
  padding: 0;
  margin: 0;
  list-style: none;
}

.menuList > li:hover > .subMenu {
  display: block;
}