I expect these items to align horizontally

Question

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.

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.

React

<div className="InputRow">
  <Label className="inline">New customer: </Label>
  <Field className="inline" onChange={() => this.onChange()} />
  <Button className="inline">Ok</Button>
</div>

Css

.inline 
{
    display: inline-block;
}
.InputRow
{
    height: 32px;
}

Answer 1

Try using a flexbox

 .InputRow { display: flex; align-items: center; height: 32px; } 

 <div className="InputRow"> <Label>New customer: </Label> <Field onChange={() => this.onChange()} /> <Button>Ok</Button> </div> 

Answer 2

You can use the Bootstrap Grid Layout to align item in a row. https://react-bootstrap.github.io/components.html#page-layout

Just use <Row> and <Col> from React-Bootstrap.

Answer 3

Just give your .inline elements height:100%; so they get the full parent's height:

.inline {
  display: inline-block;
  height: 100%;
}

.InputRow {
  height: 32px;
}

Demo:

 .inline { display: inline-block; height: 100%; } .InputRow { height: 32px; } 

 <div className="InputRow"> <Label className="inline">New customer: </Label> <Field className="inline" onChange={()=> this.onChange()} /> <Button className="inline">Ok</Button> </div>