Search Box goes down with menu (mobile version)

I will try to give you as many details for what I would like to achieve. I would like to make a clone of https://www.pcgamesn.com/(mobile version),I recreated the navbar and it looks like there(it used to but during rebuilding it I might lost something I will figure it out by myself) but when I included a search box the menu keeps it. Here is the navbar code:

<nav class="navbar">

        <div class="brand-title">w2hub</div>
        <div class="search-box">
     <input class="search-txt" type="text" name="" placeholder="Type to Search">
<a class="search-btn" href="#">
  <i class="fa fa-search"></i>
</a>
    </div>
        <a href="#" class="toggle-button">
          <span class="bar"></span>
          <span class="bar"></span>
          <span class="bar"></span>
        </a>
        <div class="navbar-links">
      
          <ul>
            <li><a href="#">News</a></li>
            <li><a href="#">Warzone 2</a></li>
            <li><a href="#">Dota 2</a></li>
            <li><a href="#">Apex</a></li>
            <li><a href="#">League of Legends</a></li>
            <li><a href="#">Comumunity</a></li>
          </ul>
        </div>
      
</div>

    </div>
   
    </div>
      </nav>   

and here is the css for it

  .navbar {
    display:flex;
      flex-direction: column;
      align-items: center;
  }

  .toggle-button {
      display:flex;
      margin-right: 350px;
  }

  .navbar-links {
      display: none;
      width: 100%;
      background-color: rgb(255, 255, 255);
      
  }

  .navbar-links ul {
      width: 100%;
      flex-direction: column;
  }

  .navbar-links ul li {
      text-align: center;
      padding-top: 1rem;
  }

  .navbar-links ul li a {
      padding: .5rem 1rem;
      color: black;
  }

  .navbar-links.active {
      display: flex;
      color: transparent;
  }

.navbar-links.active >.search-box{
  display: block;
}

  .search-box
{
  position : absolute;
  margin-left: 80%;
  margin-top: 2.5em;
  transform : translate(-50%,-50%);
  background : #2F3640;
  height : 40px;
  border-radius : 40px;
  padding : 0px;
  
}
.search-btn
{
  
  color : #4097FF;
  float : right;
  width : 40px;
  height : 40px;
  border-radius: 50%;
  background : #2F3640;
  display:flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition:0.4s;
}
.search-txt
{
  border:none;
  background:none;
  outline:none;
  float:left;
  padding:0;
  color: #fff;
  font-size:16px;
  transition : 0.4s;
  line-height: 40px;
  width : 0px;
}
.search-box:hover > .search-txt
{
  width: 290px;
  padding: 0 6px;
}
.search-box:hover > .search-btn
{
  
  margin-top: -2.5rem;
 background:white;
}    

Here is the codepen : https://codepen.io/larscopurin/pen/LYmLPOB

What I tried:1) I read everything about positioning and tried to add this by css(I failed) 2)I tried using js but I'm still beginner at it(tried to make a function and inside an if(if toggle is active => searchbox stays hidden etc)

What might be the problem in my opinion : flex(I might still not understanding it very well and maybe that's why my elements are overlapping )

Every reference about my case where I can document myself will be appreciated! Thanks