title: React / Material UI - <CardHeader> css
body: <p>Using React &amp; Material UI I'm trying to layout 3 divs within a <code>&lt;Card&gt;</code> <code>&lt;CardHeader/&gt;</code> such that it has a left, center and right alignment respectively as shown below.</p>
  
  <p>The change is trivial, I need to remove the padding and change to <code>display: inherit</code> but it seems this <code>&lt;div&gt;</code> exists between the exposed <code>style &amp; titleStyle</code> for <code>&lt;CardHeader&gt;</code> and <code>&lt;CardHeader title={someElement}/&gt;</code></p>
  
  <p>The hierarchy looks like:<br>
  <code>...&lt;div&gt;&lt;div.myCardHeader&gt;&lt;div&gt;&lt;span&gt;&lt;myTitleElement&gt;...</code></p>
  
  <p><a href="https://i.stack.imgur.com/21uyj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/21uyj.png" alt="enter image description here"></a></p>
  
  <p>Being so new to React and styles, I'm unsure how to get to it.
  Some representative code follows.</p>
  
  <p>Thanks for help.</p>
  
  <pre><code>// @flow
  import React, { Component } from 'react';
  import Paper from 'material-ui/Paper';
  import { Card, CardActions, CardHeader, CardMedia, CardTitle, CardText } from 'material-ui/Card';
  
  const style = {
    paper: {
      height: 250,
      width: 200,
      margin: 20,
    },
    card: {
      header: {
        container: {
          display: 'flex',               /* establish flex container */
          justifyContent: 'space-between',
          backgroundColor: 'lightblue'
        },
        padding: 1,
        height: 26
      }
    }
  };
  
  const POCardTitle = () =&gt; (
    &lt;div className="myContainer" style={style.card.header.container}&gt;
      &lt;div style={{ width: 25, height: 26, border: '2px dashed red' }}&gt; - &lt;/div&gt;
      &lt;div style={{ width: 25, height: 26, border: '2px dashed blue' }}&gt; - &lt;/div&gt;
      &lt;div style={{ width: 25, height: 26, border: '2px dashed green' }}&gt; - &lt;/div&gt;
    &lt;/div&gt;
  );
  
  export default class POCard extends Component {
  
    render() {
      return (
        &lt;div&gt;
          &lt;Paper style={style.paper} zDepth={2} &gt;
            &lt;Card &gt;
              &lt;CardHeader className="myCardHeader"
                style={style.card.header}
                titleStyle={{ paddingRight: 0, display: 'inline' }}
                title={&lt;POCardTitle /&gt;}
              /&gt;
            &lt;/Card&gt;
          &lt;/Paper&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>