如何使用flex将元素右对齐并彼此相邻？

Question

在我的PageHeader分量I具有2个组件，使头：从Flexstuff组件的用户部件和门headercontent：

<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头内容？我怎样才能显示这个旁边的海誓山盟？ Link to github