JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a>
  <ul class="dynamic">
  <li><a href="#">Sub item 1</a></li>
  <li><a href="#">Sub item 2</a></li>
  <li><a href="#">Sub item 3</a></li>
  <li><a href="#">Sub item 4</a></li>
  <li><a href="#">Sub item 5</a></li>
  <li><a href="#">Sub item 6</a></li>
  <li><a href="#">Sub item 7</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a>
 <ul class="dynamic">
  <li><a href="#">Sub item 1</a></li>
  <li><a href="#">Sub item 2</a></li>
  <li><a href="#">Sub item 3</a></li>
  </ul>
  </li>
</ul>

CSS

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.nav > li {
  display: inline-block;
}
.nav a {
  padding: 5px 10px;
}
.dynamic {
  position: absolute;
  height: 80px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: stretch;
}
.dynamic > li {
  background-color: #fff;
}
.dynamic > li:nth-child(4n), 
.dynamic > li:last-child:nth-child(n+4) {
    flex: 1 0 auto;
}