How can I design a navigation bar where one group of items are aligned left and another group aligned right with CSS Flex?

The Code A is from the article.

The Image A is the result of Code A.

I hope to desgin a UI just like Image B, the two labels on the left of the bar, and the two labels on the right of the bar.

But Code B can't get the result, how can I do?

Code A

<nav>
  <ul>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3 is longer</a></li>
    <li class="push-right"><a href="#">Page 4</a></li>
  </ul>
</nav>

nav ul {
  display: flex;
  margin: 0 -10px;
}

nav li {
  margin: 0 10px;
}

.push-right {
  margin-left: auto;
}

Code B

<nav>
  <ul>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li class="push-right"><a href="#">Page 3 is longer</a></li>
    <li class="push-right"><a href="#">Page 4</a></li>
  </ul>
</nav>

//The same

Image A

Image B

Added Content

Thanks! Maybe the Code C is good way.

Code C

<nav>
  <ul>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>

    <li class="push-right"><a href="#">Page 3 is longer</a></li>
    <li ><a href="#">Page 4</a></li>
  </ul>
</nav>

nav ul {
  display: flex;
  margin: 0 -10px;
}

nav li {
  margin: 0 10px;
}

.push-right {
  margin-left: auto;
}

Put the "push-right" class on the third item, not the fourth. It then pushes both to the right.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

nav {
  display: flex;
}

a {
  margin: 0 10px;
}

.push-right {
  margin-left: auto;
}

<!-- language: lang-html -->

<nav>
  <a href="#">Page 1</a>
  <a href="#">Page 2</a>
  <a class="push-right" href="#">Page 3 is longer</a>
  <a href="#">Page 4</a>
</nav>

<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

nav > ul {
  display: flex;
  justify-content: space-between;
  padding: 0;
}

nav > ul li {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid blue;
}

<!-- language: lang-html -->

<nav>
  <ul>
    <div>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
    </div>
    <div>
      <li><a href="#">Page 3 is longer</a></li>
      <li><a href="#">Page 4</a></li>
    </div>
  </ul>
</nav>

<!-- end snippet -->