title: CSS: attach a button with perfect height alignment to input
body: <p>Let's assume for a second I <strong>do not wish to use Bootstrap</strong>.
  How do you achieve his perfect vertical alignment of the input with its button? When I do it the button vertically misaligns. I do not wish to use "hacking" on the top-margin to fix this as I'm afraid it won't look well on all browsers. </p>
  
  <p>How is bootstrap achieving this magic? </p>
  
  <p>my goal is something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/ddLu5.png" alt="enter image description here"></p>