Как выровнять элементы справа и рядом друг с другом, используя flex?

Question

В моем компоненте PageHeader у меня есть 2 компонента, которые составляют заголовок: пользовательский компонент и содержимое заголовка портала из компонента Flexstuff:

<Container>
    <Flex direction="row">
      <Flex
        pl={[0, 18]}
        width={[1, 'auto']}
        justify={['center', 'flex-start']}
        align="center"
      >
      </Flex>
      <Flex align="center" justify="flex-end" flex="1 0 auto" px={[12, 18]}>
        {children}<User />
      </Flex>
    </Flex>
</Container>

Это часть компонента FlexStuff:

render() {
    const PortalContent = (
      <SearchWidgetWrapper>
        <SearchWidgetContent justify="flex-end" mx="auto">
          <SearchContainer>
           <Box>FlexStuff header content</Box>
          </SearchContainer>
        </SearchWidgetContent>
      </SearchWidgetWrapper>
    );

    return [
      <Box p={24} flex="1 0 auto" column>
              this is FlexStuff basic content
      </Box>,
      ReactDOM.createPortal(PortalContent, HEADER_CONTAINER),
    ];
}

Когда я бегу, я вижу в шапке:

this is User Component
        FlexStuff header content

Я бы ожидал, что все будет выровнено вправо. Кроме того, почему содержимое заголовка Flexstuff находится ниже компонента пользователя? Как я могу отобразить это рядом друг с другом? Ссылка на github