Right and left aligned menu items in a single container (CODEPEN: https://codepen.io/nickdavis/pen/RpBwmE) (SOURCE: https://iamnickdavis.com/right-left-aligned-menu-items-single-container/)

menu.html

<nav itemscope="" itemtype="http://schema.org/SiteNavigationElement" aria-label="Main navigation">
  <ul class="menu">
    <li class="menu-item"><a href="#" itemprop="url"><span itemprop="name">Left Item #1</span></a></li>
    <li class="menu-item"><a href="#" itemprop="url"><span itemprop="name">Left Item #2</span></a></li>
    <li class="menu-item"><a href="#" itemprop="url"><span itemprop="name">Left Item #3</span></a></li>
    <li class="menu-item"><a href="#" itemprop="url"><span itemprop="name">Left Item #4</span></a></li>
    <li class="menu-item"><a href="#" itemprop="url"><span itemprop="name">Left Item #5</span></a></li>
    <li class="menu-item right"><a href="#" itemprop="url"><span itemprop="name">Right Item #1</span></a></li>
    <li class="menu-item right"><a href="#" itemprop="url"><span itemprop="name">Right Item #1</span></a></li>
  </ul>
</nav>

style.css

.menu {
  text-align: right;
}

.menu-item {
  display: inline-block;
  padding: 10px;
}

.menu-item:not(.right) {
  float: left;
}