title: cannot change the postion of the added 2 more buttons beside the flex button
body: <p>I am making the fixed top navigation bar. In that nav bar, there are a logo, dropdown list, 2 search boxes and 3 buttons. It was okay to put dropdown list, 2 search boxes and 1 button in the middle.</p>
  <p>However, when there is more come in and want to put the one logo to the top left corner and (sign up and sign in) buttons to top right corner, they are messed up.</p>
  <p>How can I organize them and make them appear nice?</p>
  <p>I would really appreciate if any one could help me with this problem.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const select = document.querySelectorAll(".selectBtn");
  const option = document.querySelectorAll(".option");
  let index = 1;
  
  select.forEach((a) =&gt; {
    a.addEventListener("click", (b) =&gt; {
      const next = b.target.nextElementSibling;
      next.classList.toggle("toggle");
      next.style.zIndex = index++;
    });
  });
  option.forEach((a) =&gt; {
    a.addEventListener("click", (b) =&gt; {
      b.target.parentElement.classList.remove("toggle");
  
      const parent = b.target.closest(".select").children[0];
      parent.setAttribute("data-type", b.target.getAttribute("data-type"));
      parent.innerText = b.target.innerText;
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    width: 70%;
    background: #ccc;
    margin: 0 auto;
    padding: 10px 220px;
    position: fixed;
    top: 0;
  }
  
  .wrapper {
    margin: 8px 0;
  }
  
  .search-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: flex-start;
  }
  
  input {
    font-family: "Arial";
    outline: 0;
    color: #000000;
    background: #ffffff;
    width: 35%;
    border: 1px solid;
    margin: 10px 4px;
    padding: 15px;
    box-sizing: border-box;
    font-size: 15px;
    border-radius: 5px;
  }
  
  input:focus {
    outline: none;
    border: 2px solid #08ac4b;
    box-shadow: 0 0 1px #08ac4b;
  }
  
  .button {
    font-family: "Arial";
    font-size: 15px;
    padding: 8px 15px;
    min-height: 48px;
    min-width: 10px;
    word-wrap: nowrap;
    background: #08ac4b;
    color: #fff;
    border-radius: 5px;
    margin: 10px 4px;
    text-transform: none;
    outline: 0;
    border: 1px solid #08ac4b;
    font-size: 15px;
    -webkit-transition: all 0.3 ease;
    transition: all 0.3 ease;
    cursor: pointer;
  }
  
  input {
    order: 0;
    align-self: auto;
  }
  
  #citySearch {
    flex: 1 1 auto;
    width: 25%;
  }
  
  .search {
    flex: 1 1 auto;
  }
  
  .button {
    order: 4;
    flex: 0 1 auto;
    align-self: auto;
  }
  
  .button2 {
    order: 6;
    flex: 0 1 auto;
    align-self: flex-end;
    font-family: "Arial";
    font-size: 15px;
    padding: 8px 15px;
    width: 100px;
    word-wrap: nowrap;
    background: #030303;
    color: #fff;
    border-radius: 5px;
    margin: 10px 4px;
    text-transform: none;
    outline: 0;
    border: 1px solid #08ac4b;
    font-size: 15px;
    -webkit-transition: all 0.3 ease;
    transition: all 0.3 ease;
    cursor: pointer;
  }
  
  .select {
    flex: 1 1 auto;
    font-size: 15px;
    text-align: left;
    box-sizing: border-box;
    content: "";
    font-family: "Arial";
    outline: none;
    border: 1px solid;
    background: #ffffff;
    border-radius: 5px;
    margin: 10px 4px;
    color: #000000;
    position: relative;
    order: 0;
    width: 25%;
  }
  
  .select .selectBtn {
    background: var(--bg1);
    padding: 15px;
    box-sizing: border-box;
    border-radius: 5px;
    width: 100%;
    cursor: pointer;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: #fff;
  }
  
  .select .selectBtn:after {
    content: "";
    position: absolute;
    top: 45%;
    right: 15px;
    width: 6px;
    height: 6px;
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
    border-right: 2px solid rgb(0, 0, 0);
    border-bottom: 2px solid rgb(0, 0, 0);
    transition: 0.2s ease;
  }
  
  .select .selectBtn.toggle {
    border-radius: 5px;
  }
  
  .select .selectBtn.toggle:after {
    -webkit-transform: translateY(-50%) rotate(-135deg);
    transform: translateY(-50%) rotate(-135deg);
  }
  
  .select .selectDropdown {
    box-sizing: border-box;
    font-size: 15px;
    padding: 5px;
    text-align: left;
    font-family: "Arial";
    max-height: 240px;
    color: #000000;
    position: absolute;
    width: 100%;
    border-radius: 5px;
    overflow-y: scroll;
    overflow-x: hidden;
    background: var(--bg1);
    border-top: 1px solid #eee;
    z-index: 1;
    background: #ffffff;
    -webkit-transform: scale(1, 0);
    transform: scale(1, 0);
    -webkit-transform-origin: top center;
    transform-origin: top center;
    visibility: visible;
    transition: 0.2s ease;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  }
  
  .select .selectDropdown .option {
    padding: 10px;
    box-sizing: border-box;
    cursor: pointer;
  }
  
  .select .selectDropdown .option:hover {
    background: #edf7f1;
  }
  
  .select .selectDropdown.toggle {
    visibility: visible;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  
  .areastyle {
    font-family: "Arial";
    outline: 0;
    color: #000000;
    background: #ffffff;
    width: 100%;
    border: 1px solid;
    margin: 10px 4px;
    padding: 15px;
    box-sizing: border-box;
    font-size: 15px;
    border-radius: 5px;
    resize: none;
  }
  
  .areastyle:focus {
    outline: none;
    border: 2px solid #08ac4b;
    box-shadow: 0 0 1px #08ac4b;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;form&gt;
  
      &lt;div class="wrapper"&gt;
        &lt;div class="search-container"&gt;
          &lt;a&gt;Logo Here&lt;/a&gt;
  
          &lt;div class="select"&gt;
            &lt;div class="selectBtn" data-type="firstOption"&gt;
              Choose a category
            &lt;/div&gt;
            &lt;div class="selectDropdown"&gt;
              &lt;div class="option" data-type="firstOption"&gt;Choose a category&lt;/div&gt;
              &lt;div class="option" data-type="firstOption"&gt;All categories&lt;/div&gt;
              &lt;div class="option" data-type="firstOption"&gt;All categories&lt;/div&gt;
              &lt;div class="option" data-type="secondOption"&gt;All categories&lt;/div&gt;
              &lt;div class="option" data-type="thirdOption"&gt;All categories&lt;/div&gt;
              &lt;div class="option" data-type="forthOption"&gt;All categories&lt;/div&gt;
              &lt;div class="option" data-type="fifthOption"&gt;All categories&lt;/div&gt;
              &lt;div class="option" data-type="sixthOption"&gt;All categories&lt;/div&gt;
              &lt;div class="option" data-type="sixthOption"&gt;All categories&lt;/div&gt;
              &lt;div class="option" data-type="sixthOption"&gt;All categories&lt;/div&gt;
              &lt;div class="option" data-type="sixthOption"&gt;All categories&lt;/div&gt;
              &lt;div class="option" data-type="sixthOption"&gt;All categories&lt;/div&gt;
              &lt;div class="option" data-type="sixthOption"&gt;All categories&lt;/div&gt;
              &lt;div class="option" data-type="sixthOption"&gt;All categories&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;input id="citySearch" type="text" placeholder="City"&gt;
  
          &lt;input type="text" class="search" placeholder="Search for an item"&gt;
          &lt;button type="submit" class="button"&gt;Search&lt;/button&gt;
  
          &lt;button type="submit" class="button2"&gt;Sign Up&lt;/button&gt;
          &lt;button type="submit" class="button2"&gt;Sign In&lt;/button&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
  
  
    &lt;/form&gt;
  
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/nEbPC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nEbPC.png" alt="enter image description here" /></a></p>