How to position elements from the base in a flex box, without going below the base

I'm trying to position elements in a header displayed as flexbox so that an image (logo) on the left will be vertically aligned to the bottom of a nav on the right. Seems easy enough, however I also have a search button that needs to be positioned about the nav. When I do this the search button seems to push the nav below the baseline of the flexbox and no amount of padding or negative margins seems to fix it.

The logo is contained inside a div that takes up 40% of the screen width and the nav inside a div that takes up 60%. I've taken a screenshot and to illustrate I've added a red background to the logos container div.

Code is below:

<body>

    <header class="pageHead">
        <div class="logoBox">
            <img class="logo" src="images/Logo.png">
        </div>
        <div class="headRight">

            <nav id="mainNav">
                <i class="fas fa-search searchIcon"></i>
                <li class="active">Products</li>
                <li>Support</li>
                <li>About</li>
                <li>Contact</li>
                <li class="orange">Partners</li>
            </nav>
        </div>
    </header>

</body>



body {
    background-color:  #f7f7f7;
}
header.pageHead {
    display: flex;
    align-items: baseline;
    padding: 30px 10%;
    color: #555;
}
.logoBox{
    width: 40%;
}
.headRight {
    width: 60%;
}
nav#mainNav {text-align: right;}
nav#mainNav li {
    display: inline-block;
    padding: 0 0 0 2em;
    font-size: 1.2em;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 0.1em;
} 
.searchIcon {
    width: 100%;
    text-align: right;
}

Any help would be greatly appreciated. Thanks.

Solution

You can tried this.

body {
                background-color:  #f7f7f7;
            }
            header.pageHead {
                display: flex;
                align-items: center;
                padding: 30px 10%;
                color: #555;
            }
            .logoBox{
                width: 20%;
                background: red;
            }
            .headRight {
                width: 80%;
            }
            nav#mainNav {text-align: right;display: flex;}
            nav#mainNav li {
                display: inline-block;
                padding: 0 0 0 2em;
                font-size: 1.2em;
                font-family: 'Open Sans', sans-serif;
                letter-spacing: 0.1em;
            } 
            .searchIcon {
                width: 100%;
                text-align: right;
            }

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        
    </head>
    <body>

      <header class="pageHead">
          <div class="logoBox">
              <img class="logo" src="images/Logo.png">
          </div>
          <div class="headRight">

              <nav id="mainNav">
                  <i class="fa fa-search searchIcon"></i>
                  <li class="active">Products</li>
                  <li>Support</li>
                  <li>About</li>
                  <li>Contact</li>
                  <li class="orange">Partners</li>
              </nav>
          </div>
      </header>

  </body>
</html>