CSS Vertical-align &  Inline-block

During the process of working today I came across a CSS issue with vertical-align and two inline-block elements next to each other.

Setting vertical-align to baseline for both didn’t solve the issue, but after a little digging I discovered that middle did solve the issue:

.menu-utility-container {
    display:inline-block;
    vertical-align:middle;
}
.search-form {
    display:inline-block;
    vertical-align:middle;
}

Hopefully this may help others out there!