Sails.js с React.js и PrimeReact

Question

Я пытаюсь понять, как я могу объединить все три фреймворка, просто определив заголовок с некоторой магией flexbox.

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

У меня есть следующий основной файл js, который включен в index.html:

import React, {Component} from 'react';

import 'primereact/resources/themes/kasper/theme.css';
import 'primereact/resources/primereact.min.css';
import 'font-awesome/css/font-awesome.css';

import Menu from './menu.js';

import styles from '../styles/ssp.css';
import pic from '../images/board-361516_640.jpg';

class SSP extends Component {
    render() {
        return(
            <div className={styles.container}>
                <div className={styles.topmenu_container}>
                    <img className={styles.logo} src={pic} />
                    <div className={styles.tm_name_container}>
                        <div className={styles.tm_name_1}>Name1</div>
                        <div className={styles.tm_name_2}>Name2</div>
                    </div>
                    <Menu />
                </div>

            </div>
        );
    };
}

export default SSP;

А в menu.js определено меню:

import React, {Component} from 'react';
import {TabMenu} from 'primereact/components/tabmenu/TabMenu';

class Menu extends Component {
    constructor() {
        super();
        this.state = {};
    }

    render() {
        var items=[
            {label: 'Tab-1'},
            {label: 'Tab-2'},
            {label: 'Tab-3'}
        ];
        return(
            <React.Fragment>
                <TabMenu model={items} />
            </React.Fragment>
        );
    };
}

export default Menu;

Моя таблица стилей выглядит так:

body {
    margin: 0;
}

.container {
    display: flex;
    flex-direction: column;
    align-content: flex-column;
}

.topmenu_container {
    display: flex;
    background-image: linear-gradient(to left, #222222 0%, black 50%);
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
}

.tm_name_container {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
}

.tm_name_1 {
    flex-grow: 1;
    color: white;
    margin-right: 5px;
    font-size: 2em;
    font-family: Gadget;
    font-weight: bold;
}

.tm_name_2 {
    flex-grow: 1;
    color: orange;
    font-size: 2em;
    font-family: Gadget;
    font-weight: bold;
}

.logo {
    width: 8%;
}

Результат не похож на то, что я ожидал

Я не могу понять, как мне добиться того, чтобы меню выглядело так, как показано на демонстрационной стороне PrimeReact:

Я также подумал, что у него есть кто-то, кто делает все это с флексбоксом, но даже применяет Меню после всего CSS

import React, {Component} from 'react';

import 'primereact/resources/themes/kasper/theme.css';
import 'primereact/resources/primereact.min.css';
import 'font-awesome/css/font-awesome.css';

import Menu from './menu.js';

import styles from '../styles/ssp.css';
import pic from '../images/board-361516_640.jpg';

class SSP extends Component {
    render() {
        return(
            <div>
            <div className={styles.container}>
                <div className={styles.topmenu_container}>
                    <img className={styles.logo} src={pic} />
                    <div className={styles.tm_name_container}>
                        <div className={styles.tm_name_1}>Name1</div>
                        <div className={styles.tm_name_2}>Name2</div>
                    </div>

                </div>
            </div>
            <Menu />
            </div>
        );
    };
}

export default SSP;

результат не ожидается

Каждый намек на то, что я недопонимаю, высоко ценится