title: multiline text causing div container to be pushed down
body: <p>I have a button component which is basically a button and a text beneath this button. both share the same container.
  when the text (beneath the button, not inside it), is multiline, the button is pushed down, causing weird alignment issue</p>
  
  <p>I tried to separate the 'text' css class outside to another separate div, it did not work. I also tried to give the parent 'vertical-align: top' (because I read somewhere that the problem might be caused due to the text push the parent's vertical-align: baseline down. It did not make any difference and didn't fix my issue</p>
  
  <pre><code>.container {
    display: inline-block;
    width: 56px;
    height: 56px;
    .button {
      display: flex;
      justify-content: center;
      width: 56px;
      height: 56px;
      cursor: pointer;
      .icon {
        width: 24px;
        height: 24px;
      }
    }
    .text {
      font-size: 13px; 
      text-align: center; 
      text-transform: capitalize;
    }
  }
  
  relevant jsx (react):
  &lt;div className='container'&gt;
    &lt;div&gt;
      &lt;button className='button' style={buttonColors}&gt;
      &lt;div className='icon'/&gt;
      &lt;/button&gt;
    &lt;/div&gt;
    &lt;div className='text'&gt; {text} &lt;/div&gt;
    &lt;/div&gt;
      );
  </code></pre>
  
  <p>the expected results: whenever there is multiline text, the text will continue down, not pushing the buttom down.</p>