Html – How to keep left and right-hand divs in navbar on the same row when you reach col-xs breakpoint in CSS flexbox?

I am implementing a navbar for a website and want to keep the logo and header on the left-hand side, and the links on the right-hand side. I am using CSS Flexbox to create 2 divs and place them on the same row. I have a parent div that represents the navbar spans the length of the page (width = 100%). I assign the "row" class to the navbar div and col classes to the 2 child divs.

When I resize the browser window and hit the xs breakpoint (width of 576 px), the right div moves down to the next row and leaves lots of unused space on the first row after the header. How do I keep the 2 divs on the same row no matter how small the window is?

I tried using media queries and playing with padding and margins but I can’t get rid of the unused space.

I tried changing the justify-content attribute from "space-between" (which will push the content on each side towards the ends) to "flex-start" so the content can be pushed towards each other when the window gets smaller. That didn’t work either.

Here is my current HTML code:

<div class="row portalNavbar">
  <div class="leftNav col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <img src="....."> 
    <h1>CLIENT PORTAL</h1>
  </div>
            
  <div class="rightNav col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <div class="navLink">
      <a href="${redirect}" class="navText icon-link icon-link-hover">
        <i class="bi bi-icon_name bi-house"></i>
      </a> 
    </div>
    <div class="navLink">
      <a href="${redirect}" class="navText icon-link icon-link-hover">
        About Us
      </a> 
    </div>
  </div>
</div>

CSS:

.portalNavbar {
  background: rgb(69, 85, 165);
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.leftNav {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
}

.rightNav {
  display: inline-flex;
  justify-content: flex-end;
  height: 100%;
  min-height: 100%;
}

@media (min-width: 400px) and (max-width: 600px) {
  .portalNavbar {
    justify-content: flex-start;
    display: inline-flex;
  }
}