grid.css

.grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: stretch;

  &__cell {
    display: inherit;

    &_fluid {
      flex-grow: 1;
    }

    &_top {
      align-self: flex-start;
    }

    &_column {
      display: flex;
      flex-direction: column;
    }
  }

}

header.js

import React from 'react';
import classNames from 'classnames';

import g from 'styles/grid.css';
import styles from './styles.css';
import i from './icomoon67382/style.css';

const cellFluidClass = classNames(g.grid__cell, g.grid__cell_fluid);
const arrowClass = classNames(styles.arrow, i['icon-arrow-left2']);

export default () => {
  return <div className={ styles.header }>
    <div className={ g.grid }>
      <div className={ g.grid__cell }>
        <a href="/" className={ styles.logo }>ChatFuel</a>
      </div>
      <div className={ g.grid__cell }>
        <a href="/" className={ arrowClass }></a>
      </div>
      <div className={ g.grid__cell }>
        <div className={ g.grid }>
          <div className={ g.grid__cell }>
            <img className={ styles.avatar } src="http://re-actor.net/uploads/posts/2009-12/1261766519_avatar_re-actor.net_27.jpg" />
          </div>
          <div className={ g.grid__cell }>
            <select>
              <option value="1">Bot 1</option>
              <option value="2">Bot 2</option>
              <option value="3">Bot 3</option>
            </select>
            <div>Saved</div>
          </div>
        </div>
      </div>
      <div className={ cellFluidClass }>Space</div>
      <div className={ g.grid__cell }></div>
    </div>
  </div>;
};