Почему мои вложенные столбцы из React-Bootstrap отображаются неверно?

Question

Эта проблема:

Я вложил 2 Кола из React-Bootstrap внутри другого <Col> вот так:

<Row className="show-grid" style={styles.container}>
  <Col md={2} xs={2}>
    My Rooms
  </Col>
  <Col md={2} xs={2}>
    Todos
  </Col>
  <Col md={2} xs={2}>
    Images
  </Col>
  <Col md={5} xs={5}>
    <Row>
      <Col md={1} xs={1}>
        <FontAwesomeIcon icon={faSearch} />
      </Col>

      <Col md={11} xs={11}>
        <FormControl placeholder="Search" />
      </Col>
    </Row>
  </Col>

  <Col md={1} xs={1} align="center" className="pull-right">
    {props.user ? (
      <Link to="/" onClick={props.logoutUser}>
        Logout
      </Link>
    ) : (
      <Link to="/signup">Sign Up</Link>
    )}
  </Col>
  {/* TODO: Create a Sign In Form that handles Signing In Users */}
</Row>

Линия, о которой я говорю, вот эта часть:

<Col md={5} xs={5}>
    <Row>
      <Col md={1} xs={1}>
        <FontAwesomeIcon icon={faSearch} />
      </Col>

      <Col md={11} xs={11}>
        <FormControl placeholder="Search" />
      </Col>
    </Row>
  </Col>

Я бы предположил, что это покажет панель навигации. Элемент навигации, который занимает пространство md={11} xs={11} это маленькая панель поиска. Я бы предположил, что у него есть значок поиска, а остальная часть места для напоминания - текстовый ввод.

Но это не так. Вот как это выглядит:

Таким образом, ввод находится под значком поиска из React-Fontawesome вместо того, чтобы оба рядом друг с другом.

Что я пробовал до сих пор?

Я обернул значок и входные столбцы в другой набор <Row> теги. Но это ничего не меняет. Я пытался положить некоторые ручные стили с inline но это ничего не меняет.

Что я делаю неправильно? В чем проблема?