How to separate items in an HTML list to make it like three elements are on one side and two on the other side in a horizontal navigation

I have already put a div tag along the place where I want to split the list items. However, when I do float left or right, it doesn't work. I want to create a navigation bar where the user can browse the website on the left and manage their account on the right. Can anyone help me?

This Is The HTML Code:

<div class="header">
  <ul>
    <div class="first">
      <li><a href="">Home</a></li>
      <li><a href="">Updates</a></li>
      <li><a href="">Blog</a></li>
    </div>
    <div class="last">
      <li><a href="">Sign In</a></li>
      <li><a href="">Login</a></li>
    </div>
  </ul>
</div>

This Is The CSS Code

    ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #0f0f0f;
  border-radius: 50px;
}

li {
  float: left;
  background-color: #0f0f0f;
}

li a {
  display: block;
  color: #8ca2ff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
font-size: 20px;
}

li a:hover {
  background-color: #111;
}

How The Navigation Bar Looks Now