title: Top align text in flexbox
body: <p>I have created a layout in which there are buttons with text.</p>
  
  <p>What I am trying to accomplish is to get the flexbox to work properly on IE and figure out how to get the text to align at the top of each.</p>
  
  <p>I tried <code>vertical-align: top;</code> with no luck:</p>
  
  <p><strong>Text aligned at top</strong>
  <a href="https://i.stack.imgur.com/xCdWm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xCdWm.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>.flexbox {
    width: 100%;
    table-layout: fixed;
  }
  .flexbox tr {
    display: flex;
  }
  .flexbox tr td {
    flex: 1;
    display: flex;
  }
  button {
    flex: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class=flexbox&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;button&gt;Hello there my name is bob and this is a test Hello there my name is bob and this is a test Hello there my name is bob and this is a test&lt;/button&gt;
        &lt;td style="vertical-align:top;"&gt;
          &lt;button&gt;B&lt;/button&gt;
          &lt;td&gt;
            &lt;button&gt;C&lt;/button&gt;
            &lt;td&gt;
              &lt;button&gt;D&lt;/button&gt;
              &lt;td&gt;
                &lt;button&gt;E&lt;/button&gt;
                &lt;td&gt;
                  &lt;button&gt;GF&lt;/button&gt;
                &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/tXS6w/443/" rel="nofollow noreferrer">http://jsfiddle.net/tXS6w/443/</a></p>