title: How to left/right align two spans in a flexbox div
body: <p>I have a header bar that fills the width of the browser. I have two items of text, one I want on the left and the other on the right. How do I achieve this?</p>
  
  <p>Code so far</p>
  
  <pre><code>&lt;div className="logtailTitle"&gt;
     &lt;span&gt;{this.props.initialDataReceived ? this.props.logtailApplicationName : null}&lt;/span&gt;
     &lt;span&gt;{this.props.initialDataReceived ? this.props.logtailPathName : null}&lt;/span&gt;
  &lt;/div&gt;
  
  .logtailTitle {
      flex: 0 4em;
      background-color: #555;
      color: #bbb;
      vertical-align: middle;
      display: flex;
      font-style: italic;
      font-size: 12px;
      padding: 7px 15px 8px 15px;
  }
  </code></pre>