code of mdn.

//html code 

<div class="navbar">

  <div class="logo">mdn_</div>

  <div class="container">

  <div class="reference">References</div>

  <div class="guides">Guides</div>

  <div class="plus">Plus</div>

  <div class="blog">Blog</div>

  <div class="play">Play</div>

  <div class="aihelp">AI Help</div>

    </div>

  <div class="container2">

    <button>Theme</button>

  <input placeholder="_">

    <a href="#">Log in</a>

    <button>Sign up for free</button>

  </div>

</div>

//CSS code

*{

  font-weight: 700;

}

.navbar{

  display: flex;

  background-color: gray;

  height: 4.5rem;

  justify-content: center;

  align-items: center;

  font-size: 1.2rem;

}

.container{

  justify-content: center;

  align-items: center;

  width: 45%;

  height: auto;

  display: flex;

  flex-direction: start;

}

.container2{

  display: flex;

  width: 45%;

  flex-direction: end;

}

button{

  background-color: white;

}