title: What makes a label tag not to be able to be "on top" of an input tag?
body: <p>In this page:</p>
  
  <p><a href="http://getbootstrap.com/components/#input-groups-buttons" rel="nofollow noreferrer">http://getbootstrap.com/components/#input-groups-buttons</a></p>
  
  <p>If you change the Go! <code>button</code> to a label (with the Chrome inspector) you'll notice that the Go! button is not longer on top of the input field:</p>
  
  <p><a href="https://i.stack.imgur.com/rqnto.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rqnto.png" alt="enter image description here"></a></p>
  
  <p>(Instead of the borders to be one on top of the other they are side by side.)</p>
  
  <p>Why is this and how to make the two elements to be one on top of another?</p>
  
  <p><a href="https://i.stack.imgur.com/BFGQt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BFGQt.png" alt="enter image description here"></a></p>