Keeping an icon in place

I'm still new to CSS, and I'm having a go at building a responsive navbar. I have it so it's initially horizontal, but all elements apart from the first disappear when screen width is under 600px, and then be displayed vertically when an icon is clicked. The issue I'm having is I would like the icon to stay inline with the first element in my navbar, but once clicked, it appears at the bottom of the bar. This makes sense, because in my code they're being displayed vertically in order, but I'm not sure what properties to look at to achieve what I want.

Here is the HTML

<div id="navbar">
<a href="#" class="navbar-content">a</a>
<a href="#" class="navbar-content">b</a>
<a href="#" class="navbar-content">c</a>
<a href="#" class="navbar-content">d</a>
<a href="#" class="navbar-content">e</a>
<a href="#" class="navbar-content">f</a>
<i class="navbar-content fa fa-bars"></i>
</div>

& CSS

#navbar {
      text-align: right;
      width: 100%;
 }

 .navbar-content {
      vertical-align: middle;
      text-decoration: none;
 }

 .fa-bars {
      display: none;
 }

 body {
     background-color: gray;
 }

 @media screen and (max-width: 600px) {
     #navbar .navbar-content:not(:first-child) {
          display: none;
     }

     #navbar .navbar-content.fa-bars {
          display: inline-block;
     }

     #navbar.responsive .navbar-content:not(:last-child) {
          display: block;
          text-align: left;
     }
}

& Js

let navButton = document.querySelector(".fa-bars");
let navbar = document.querySelector("#navbar");

navButton.addEventListener("click", function() {
    if (navbar.className === "") {
        navbar.className = "responsive";
    } else {
        navbar.className = "";
    }
});