I have the following html:

<div class="menu">
  <div class="menu-item">
    <div class="menu-label">Item 1</div>
    <button class="help">Button</button>
  </div>
  <div class="menu-item">
    <div class="menu-label">Item 2</div>
  </div>
  <div class="menu-item">
    <div class="menu-label">Item 3</div>
  </div>
  <div class="menu-item">
    <div class="menu-label">Item 4</div>
  </div>
</div>

and the corresponding CSS here:

.menu {
  display: table;
}
.menu-item {
  display: table-row;
  vertical-align: middle;
/*   following properties are for debugging purposes */
  background: orange;
  outline: solid blue 2px;
  height: 40px; 
}
.menu-label {
  display: table-cell;
  vertical-align: middle;
  padding: 0 15px;
}
.help {
  display: table-cell;
}

I’m trying to make the button element to show up underneath the Item1’s menu-label but I can’t quite figure that out.
I can’t change much of .menu-item styling because it’s a shared styling in a huge codebase (but i could possibly add another class). How can I achieve this with mainly using .help class?

codepen