FlexContent.css

.container-layout {
    min-height: 60px;
    max-width: 600px;
    margin: auto;
    padding: 0 5px;
}

.container-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content-flex-grow {
    display: flex;
    align-items: center;
    min-width: 0px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

.content-flex-wrap {
    flex-wrap: wrap;
    text-align: left;
}

.content-flex-nowrap {
    white-space: nowrap;
}

.text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-break {
    word-break: break-all;
    word-wrap: break-word;
}

FlexContent.js

import React, { Fragment } from 'react';

import './TestBox.css';

const Actions = () => (
    <Fragment>
        <button style={{ marginRight: '5px' }}>Create</button>
        <button>Save</button>
    </Fragment>
);

const FlexContent = () => (
    <div className="content-flex-grow">
        // Won't work, needs a proper logo src
        <img style={{ height: '30px', width: '30px', flexShrink: 0 }} src={logo} alt="logo" />
        <div className="content-flex-grow content-flex-wrap">
            <strong className="text-truncate" style={{ paddingRight: '5px' }}>
                Company Name
            </strong>
            <div className="text-truncate">
                Contact Name
            </div>
        </div>
    </div>
);

const TestBox = props => (
    <div className="container-layout container-flex">
        {!!props.title && <div className="content-flex-nowrap" style={{ paddingRight: "5px" }}>{props.title}</div>}
        {props.content}
        {!!props.actions && <div className="content-flex-nowrap">{props.actions}</div>}
    </div>
);

export default () => (
    <TestBox
        content={<FlexContent />}
        actions={<Actions />}
    />
);