title: Elements won't align next to each other in button flex container
body: <p>I have the following code which works as expected in Chrome and IE. However in Firefox the second span in each button shows in its own line. Why is this? How can this be fixed? </p>
  
  <p><a href="https://jsbin.com/banafor/4/edit?html,css,output" rel="nofollow noreferrer">https://jsbin.com/banafor/4/edit?html,css,output</a></p>
  
  <p>Expectation (in IE, Chrome works):</p>
  
  <p><a href="https://i.stack.imgur.com/jzH5H.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jzH5H.png" alt="enter image description here"></a></p>
  
  <p>Fail (in Firefox):</p>
  
  <p><a href="https://i.stack.imgur.com/KzhkA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KzhkA.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.buttons-pane {
    width: 150px;
    height: 400px;
  }
  button {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  button .title {
    background-color: yellow;
  }
  button .interest {
    background-color: lightyellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="buttons-pane"&gt;
  
    &lt;button type="button"&gt;
      &lt;span class="title"&gt;Neque porro quisquam est qui dolorem ipsum quia dolor sit amet&lt;/span&gt;
      &lt;span class="interest"&gt;Short&lt;/span&gt;
    &lt;/button&gt;
  
    &lt;button type="button"&gt;
      &lt;span class="title"&gt;Neque porro quisquam&lt;/span&gt;
      &lt;span class="interest"&gt;LongInterest&lt;/span&gt;
    &lt;/button&gt;
  
    &lt;button type="button"&gt;
      &lt;span class="title"&gt;Vix aeterno vocibus vituperatoribus eu. Nec regione fuis&lt;/span&gt;
      &lt;span class="interest"&gt;Keyword&lt;/span&gt;
    &lt;/button&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>PS: I don't mind changing changing the spans for something else if necessary :)</p>