Reactjs - базовое разбиение столбца с помощью flexbox

Question

В настоящее время я пытаюсь изучить основы React, поэтому я решил попробовать макет другого веб-сайта.В настоящее время я пытаюсь создать заголовок, который выглядит как

в Airbnb. К сожалению, я не могу понять, как настроить выравнивание и как сделать так, чтобы логотиппуть на левой стороне.

Любой совет будет оценен!Спасибо!

<Flexbox flexDirection="column">
            <Flexbox element="header" height="60px">
                <div style={{ flexGrow: 0}}>
                    <img src={Logo} />
                </div>
                <div style={{flexGrow: 8}}>
                    <SearchBar
                        onChange={() => console.log('onChange')}
                        onRequestSearch={() => console.log('onRequestSearch')}
                        style={{
                            margin: '0 auto',
                            maxWidth: 800
                        }}
                    />
                </div>
                <div>
                    <Button>Become a host</Button>
                </div>
                <div>
                    <Button>Sign up</Button>
                </div>
                <div>
                    <Button>Log in</Button>
                </div>
            </Flexbox>
        </Flexbox>