title: I expect these items to align horizontally
body: <p>I am working with react-bootstrap, and put 3 items in a div. Nothing fancy, you think. Except the horizontal alignment is completely out of whack.</p>
  
  <p><a href="https://i.stack.imgur.com/XrchL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XrchL.png" alt="horizontal-align"></a></p>
  
  <p>I can probably fix it by changing a lot of css, but I want to understand why this is happening in the first place. I guess I am missing something fundamental.</p>
  
  <p>React</p>
  
  <pre><code>&lt;div className="InputRow"&gt;
    &lt;Label className="inline"&gt;New customer: &lt;/Label&gt;
    &lt;Field className="inline" onChange={() =&gt; this.onChange()} /&gt;
    &lt;Button className="inline"&gt;Ok&lt;/Button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Css</p>
  
  <pre><code>.inline 
  {
      display: inline-block;
  }
  .InputRow
  {
      height: 32px;
  }
  </code></pre>