Use the suggestion that @enchev gave. Put them inside a Column component and set its vertical alignment to Center.
This happens because HTML and CSS follow some rules which are sometimes hard to reason(vertical alignment especially). Check this StackOverflow question for an example which is similar to this case: https://stackoverflow.com/questions/44933315/two-divs-with-inline-block-style-not-aligned. The solution is to either set the vertical alignment of all inline-block elements to something other than the default (baseline) or put them in an element with a flex display and set the vertical alignment (which is the solution I provided).