How to vertically align a div wrapped within a list element?

I have a responsive collapsing menu I am working on, where I want to have the menu items centered, a loge aligned left and a searchbox aligned right.

I mostly have this setup how I want it, but to display the searchbox with an icon inside, it needs to be wrapped in divs. I've been unable to position my search div within my list of menu items and have it be vertically centered.

I'm using the Bulma CSS framework and have tried various positioning classes, but nothing is working.

This is my attempt so far:

    body {
        font-family: Helvetica, Arial, sans-serif;
        background-color: rgb(236, 236, 236);
        margin: 0em;
        color: rgb(19, 51, 61);
    }

    p {
        font-size: 18px;
        line-height: 1.5;
        font-weight: bold;
        color: rgb(51, 51, 51);
        max-width: 55em;
    }

    p a {
        color: rgb(41, 183, 206);
        text-decoration: none;
    }

    strong {
        color: rgb(41, 183, 206);
    }

    nav {
        font-size: 12px;
        background-color: rgb(19, 51, 61);
        box-shadow: 0 1px 2px rgba(19, 51, 61, 0.5);
        padding: 0 1em;
        height: 44px;
        overflow: hidden;
        text-align: center;
    }

    nav img {
        text-align: left;
    }

    nav ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        max-height: 88px;
        position: relative;
    }

    nav li {
        display: inline-block;
    }

    nav a {
        display: inline-block;
        padding: 0 1em;
        color: rgb(236, 236, 236);
        font-weight: 700;
        letter-spacing: 0.1em;
        text-decoration: none;
        text-transform: uppercase;
        white-space: nowrap;
        line-height: 44px;
        height: 44px;
    }

    nav a:hover {
        background-color: rgba(255, 255, 255, 0.08);
    }

    nav li:last-child { 
        position: absolute; 
        right: 0;
        bottom: 44px; 
        background-image: linear-gradient(to right, rgba(19, 51, 61, 0) 0, rgba(19, 51, 61, 1) 2em);
        padding-left: 3em;
    }

    nav li:nth-last-child(2) { 
        display: none;
    }

    nav#menu:target {
        height: auto;
        padding: 0;
    }

    nav#menu:target ul {
        max-height: none;
    }

    nav#menu:target li {
        display: block;
    }

    nav#menu:target a {
        display: block;
        padding: 0 2em;
        background-color: rgba(255, 255, 255, 0.05);
    }

    nav#menu:target a:hover {
        background-color: rgba(255, 255, 255, 0.08);
    }

    nav#menu:target li:not(:first-child) {
        margin-top: 2px;
    }

    nav#menu:target li:last-child {
        display: none;
    }

    nav#menu:target li:nth-last-child(2) {
        display: inline-block;
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        border-left: 2px solid rgb(19, 51, 61);
    }
    
    .search-bg {
    height: 50%;
    background-color: transparent;
}

.sb-example-1 .search {
  width: 100%;
  position: relative;
  display: flex;
}
.sb-example-1 .searchTerm {
  width: 100%;
  border: 2px solid rgba(243,241,224,1);
  border-right: none;
  padding: 5px;
  border-radius: 5px 0 0 5px;
  outline: none;
  color: #9DBFAF;
}
.sb-example-1 .searchTerm:focus{
  color: #00B4CC;
}
.sb-example-1 .searchButton {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(243,241,224,1);
  background: rgba(243,241,224,1);
  text-align: center;
  color: #fff;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  font-size: 20px;
}

.sb-example-1 .searchButton i{
  color: black;
}

.searchandsocial {
  vertical-align: top;
  position: absolute;
  right: 0;
}


.logo {    
  max-height: 34px;
  position: absolute;
  left: 0;
}

.logosize {
  max-height: 60px !important;
}

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
  
<nav id="menu">
    <ul id="menu-closed">
        <li class="logo"><a href="#"><img src="https://camo.githubusercontent.com/971caf673b2a29c7b6d6af6c74b9d7e649214eb1765bfef0848b68d3ce3a40fb/68747470733a2f2f63646e2e737667706f726e2e636f6d2f6c6f676f732f766974656a732e737667" style="max-height: 44px;" alt="" /></a></li>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
        <li><a href="#">Item 6</a></li>
        <li>
        <div class="sb-example-1 searchandsocial">
         <div class="search">
            <input type="text" class="searchTerm" placeholder="Search">
            <button type="submit" class="searchButton">
              <i class="fa fa-search"></i>
           </button>
         </div>
        </div>
        </li>
        <li><a href="#menu-closed">&#215; Close menu</a></li>
        <li><a href="#menu">&#9776; Menu</a></li>
    </ul>
</nav>
  </body>
</html>

What is the correct approach here?

Additionally, how can I prevent the search box from overlapping the other list elements?

Solution

Apply top:2px to .searchandsocial:

    body {
        font-family: Helvetica, Arial, sans-serif;
        background-color: rgb(236, 236, 236);
        margin: 0em;
        color: rgb(19, 51, 61);
    }

    p {
        font-size: 18px;
        line-height: 1.5;
        font-weight: bold;
        color: rgb(51, 51, 51);
        max-width: 55em;
    }

    p a {
        color: rgb(41, 183, 206);
        text-decoration: none;
    }

    strong {
        color: rgb(41, 183, 206);
    }

    nav {
        font-size: 12px;
        background-color: rgb(19, 51, 61);
        box-shadow: 0 1px 2px rgba(19, 51, 61, 0.5);
        padding: 0 1em;
        height: 44px;
        overflow: hidden;
        text-align: center;
    }

    nav img {
        text-align: left;
    }

    nav ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        max-height: 88px;
        position: relative;
    }

    nav li {
        display: inline-block;
    }

    nav a {
        display: inline-block;
        padding: 0 1em;
        color: rgb(236, 236, 236);
        font-weight: 700;
        letter-spacing: 0.1em;
        text-decoration: none;
        text-transform: uppercase;
        white-space: nowrap;
        line-height: 44px;
        height: 44px;
    }

    nav a:hover {
        background-color: rgba(255, 255, 255, 0.08);
    }

    nav li:last-child { 
        position: absolute; 
        right: 0;
        bottom: 44px; 
        background-image: linear-gradient(to right, rgba(19, 51, 61, 0) 0, rgba(19, 51, 61, 1) 2em);
        padding-left: 3em;
    }

    nav li:nth-last-child(2) { 
        display: none;
    }

    nav#menu:target {
        height: auto;
        padding: 0;
    }

    nav#menu:target ul {
        max-height: none;
    }

    nav#menu:target li {
        display: block;
    }

    nav#menu:target a {
        display: block;
        padding: 0 2em;
        background-color: rgba(255, 255, 255, 0.05);
    }

    nav#menu:target a:hover {
        background-color: rgba(255, 255, 255, 0.08);
    }

    nav#menu:target li:not(:first-child) {
        margin-top: 2px;
    }

    nav#menu:target li:last-child {
        display: none;
    }

    nav#menu:target li:nth-last-child(2) {
        display: inline-block;
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        border-left: 2px solid rgb(19, 51, 61);
    }
    
    .search-bg {
    height: 50%;
    background-color: transparent;
}

.sb-example-1 .search {
  width: 100%;
  position: relative;
  display: flex;
}
.sb-example-1 .searchTerm {
  width: 100%;
  border: 2px solid rgba(243,241,224,1);
  border-right: none;
  padding: 5px;
  border-radius: 5px 0 0 5px;
  outline: none;
  color: #9DBFAF;
}
.sb-example-1 .searchTerm:focus{
  color: #00B4CC;
}
.sb-example-1 .searchButton {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(243,241,224,1);
  background: rgba(243,241,224,1);
  text-align: center;
  color: #fff;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  font-size: 20px;
}

.sb-example-1 .searchButton i{
  color: black;
}

.searchandsocial {
  vertical-align: top;
  position: absolute;
  right: 0;
  top:2px;
}


.logo {    
  max-height: 34px;
  position: absolute;
  left: 0;
}

.logosize {
  max-height: 60px !important;
}

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
  
<nav id="menu">
    <ul id="menu-closed">
        <li class="logo"><a href="#"><img src="https://camo.githubusercontent.com/971caf673b2a29c7b6d6af6c74b9d7e649214eb1765bfef0848b68d3ce3a40fb/68747470733a2f2f63646e2e737667706f726e2e636f6d2f6c6f676f732f766974656a732e737667" style="max-height: 44px;" alt="" /></a></li>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
        <li><a href="#">Item 6</a></li>
        <li>
        <div class="sb-example-1 searchandsocial">
         <div class="search">
            <input type="text" class="searchTerm" placeholder="Search">
            <button type="submit" class="searchButton">
              <i class="fa fa-search"></i>
           </button>
         </div>
        </div>
        </li>
        <li><a href="#menu-closed">&#215; Close menu</a></li>
        <li><a href="#menu">&#9776; Menu</a></li>
    </ul>
</nav>
  </body>
</html>