center an element relative to its sibling

For simplicity, examples below didn’t include fancy additions like bootstrap. Only native code.

When it comes to centering an element, we would think text-align(for inline element) or margin: auto(for block element) could help with respect to viewport, but there is an edge case:

You center an input group relative to the viewport but attempt to place the submit button next to it vertically, though the horizontal option will suffice.

However, problem occurs:

See the Pen xxKjMoX by jojo (@rattlingdog) on CodePen.

Looks like the button and input filed don’t go together well. The point is we try to align these two boxes but the default setting includes label box.

Well, it is OK when we discard tag as you can put the role of label into the placeholder attribute of input element. But occasionally we encounter above problem how do we solve it?