Согласование с React-Bootstrap

Я новичок в React-Bootstrap (и в интерфейсной работе в целом). Как лучше всего выравнивать элементы при использовании React-Bootstrap?

Например:

<Grid>
    <Row className="show-grid">
        <Col md={10}>
          <Input type="text" label="Filter"/>
        </Col>
        <Col md={2}>
          <Button>Clear</Button>
        </Col>
      </Row>
</Grid>

https://jsfiddle.net/f9vdksnu/1/

Как аккуратно выровнять компонент "Кнопка" с компонентом "Ввод"? По умолчанию кнопка выравнивается по верхнему краю.

Помимо решения этой конкретной проблемы, меня интересуют рекомендации по согласованию с React-Bootstrap.