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!

About the Author

Kevin Leary is a freelance developer in Boston, MA with a strong portfolio of work, and over 13 years of experience as a programming consultant and digital strategy provider. Interested in working together? Hire me for your next project.