title: button fixed in height with text in multiple rows do not show in same vertical position
body: <h3>button css fixed with height make the vertical position ugly as each button text are more than one row </h3>
  
  <p>I tried to comment the <b>height:80px;</b> then all buttons are aligned at top vertically, but all buttons will have different height, bring the <b>BUTTONS GROUP look ugly</b>, especially I need to generate over 10 pieces of button  </p>
  
  <pre><code>button {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: #444;
    width: 120px;
    height:80px !important;
    display:inline-block;
    padding:5px;
    margin: 5px 10px;
    background-color: #fdfdfd;
    border: 1px solid #cdcdcd;
    cursor: pointer;
    border-radius: 3px;
    word-wrap: break-word;
  }
  </code></pre>
  
  <pre><code>&lt;button&gt;Text in one row &lt;/button&gt;
  &lt;button&gt;Text in more than one row in this button &lt;/button&gt;
  &lt;button&gt;Text in more than two rows in this button which have same height &lt;/button&gt;
  &lt;button&gt;Text in more than three rows in this button which have same height, but more text &lt;/button&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/e6GfC.png" rel="nofollow noreferrer">CLICK to open an image</a></p>
  
  <p><a href="https://jsfiddle.net/fc338339/g93tkm5v/4/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <h3>How to have buttons fixed in height and all buttons locate vertically-top.  
  
  Note: each button have different number of words, word-wrap into 1 line, 2 lines, 3 lines...</h3>