Не могу понять, как сделать панель поиска похожей на панель навигации. Также поисковый элемент не работает с CSS

Question

Я помещаю панель навигации над заголовком, если это влияет на что-либо.

Как это выглядит в данный момент:

Не могу понять, как сделать панель поиска похожей на панель навигации. Кроме того, поисковый элемент не работает с CSS. Если кто-то может помочь, это было бы удивительно! Я потерялся. Я пытаюсь сделать панель поиска, и панель навигации выглядит как остальные кнопки и элементы вкладки. Такая же высота, как и у других элементов.

 HTML
   <div class="navbar">
    <a class="active" href="#home">Home</a>
    <a herf="#about">About </a>
    <a herf="#patientinfo"> Patient Information </a>
    <div class="dropdown">
    <button class = "dropbutton">Select Hospital
    </button>
     <div class= "dropdown-content">
      <a href="#">Hospital</a>
       <a href="#">Hospital</a>
       <a href="#">Hospital</a>
         <a href="#">Hospital</a>
      </div>
      </div>
    <div class ="search">
            <form action="/action_page.php"> <!--backend -->
            <input type="text" name="search" placeholder="Search">
            <button type="submit">Submit</button>
           </form>
          <!--search bar -->
        </div>
       </div>

CSS 
       .navbar {
         overflow: hidden;
        background-color: black;
        font-family: 'Roboto';
        width: 100%;

          }
        .navbar a {
         float: left;
         font-size: 16px;
         color: white;
         text-align: center;
         padding: 14px 16px;
         text-decoration: none;
         }
        .navbar a.active{  /*shows active tab */
        background-color:red;
        color:white;
         }
        .navbar input[type=text] {
        background-color: inherit;
        color: white;
        width: 25%;
        float: left;
        padding: inherit;
        font-size: 16px;

          }

         }
        .navbar .search button { 
         float: left;
         padding: inherit;
         margin:0;
         margin-top:0px;
         background-color: inherit;
         font-size:15px;
         cursor:pointer;
      border:none;
    }
    .dropdown {
      float:left;
      overflow: hidden;
    }
    .dropdown .dropbutton {
        font-size: 16px;
        border: none;
        outline: none;
        color: white;
        padding: 14px 16px;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
    }
    .navbar a:hover, .dropdown:hover .dropbutton {
        background-color: red;
    }
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

       .dropdown-content a {
        float: none;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

       .dropdown-content a:hover {
        background-color: red;
       }

       .dropdown:hover .dropdown-content {  /* WHEN U HOVER OVER IT SHOWS THE MENU 
             */
          display: block;
        }

Answer 1

This is how I would handle this. But note that you will have to do some responsive styles. I put in a fail safe so you dont have bad overlapping. Note that it looks alittle off on the code snippet because its so small, you should check it out by pasting it in a fresh html file.

.navbar {
         overflow: hidden;
         background-color: black;
         font-family: 'Roboto';
         width: 100%;
         position: relative;
        height: 47px;

           }
         .navbar a {
          float: left;
          font-size: 16px;
          color: white;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
          }
         .navbar a.active{  /*shows active tab */
         background-color:red;
         color:white;
          }
         
     .dropdown {
       float:left;
       overflow: hidden;
     }
     .dropdown .dropbutton {
         font-size: 16px;
         border: none;
         outline: none;
         color: white;
         padding: 14px 16px;
         background-color: inherit;
         font-family: inherit;
         margin: 0;
     }
     .navbar a:hover, .dropdown:hover .dropbutton {
         background-color: red;
     }
     .dropdown-content {
         display: none;
         position: absolute;
         background-color: #f9f9f9;
         min-width: 160px;
         box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
         z-index: 1;
     }

        .dropdown-content a {
         float: none;
         color: black;
         padding: 12px 16px;
         text-decoration: none;
         display: block;
         text-align: left;
     }

        .dropdown-content a:hover {
         background-color: red;
        }

        .dropdown:hover .dropdown-content {  /* WHEN U HOVER OVER IT SHOWS THE MENU 
              */
           display: block;
         }

    .search {
      position: absolute;
      bottom: 0px;
      right: 0px;
    }
    .search-input {
      height: 47px;
      border: none;
      background-color: inherit;
      color: white;
      font-size: 16px;
    }
    .search-input:active {
      background-color: red;
    }
    .search-input:focus {
      background-color: red;
    }
    .search-button {
      padding: 16px 10px;
      height: 47px;
      border: none;
      color: white;
      background-color: black;
      font-size: 16px;
      cursor:pointer;
    }
    .nav-links {
      padding-right: 280px;
      height: 47px;
    }

<div class="navbar">
  <div class="nav-links">
      <a class="active" href="#home">Home</a>
      <a herf="#about">About </a>
      <a herf="#patientinfo"> Patient Information </a>
      <div class="dropdown">
        <button class = "dropbutton">Select Hospital
        </button>
         <div class= "dropdown-content">
          <a href="#">Hospital</a>
          <a href="#">Hospital</a>
          <a href="#">Hospital</a>
          <a href="#">Hospital</a>
        </div>
      </div>
    </div>
    <div class="search">
      <form action="/action_page.php"> <!--backend -->
      <input class="search-input" type="text" name="search" placeholder="Search">
      <button class="search-button" type="submit">Submit</button>
     </form>
    <!--search bar -->
  </div>
 </div>