CSS - make all elements the same height as the tallest element

How about using min-height? updated fiddle

 .container {
   width: 320px;
 }
 .container button {
   float: left;
   background: #FFFFFF;
   border: 1px solid #CCCCCC;
   width: 33.33%;
   min-height: 40px;
 }

<div class="container">
  <button>
    <span class="big-text">Okay</span>
    <span class="little-text">123</span>
  </button>
  <button>
    <span class="big-text">Another Option</span>
    <span class="little-text">456</span>
  </button>
  <button>
    <span class="big-text">Nah!</span>
    <span class="little-text">789</span>
  </button>
</div>

Just add display:flex to your container class like this:

.container {
    width: 320px;
    display:flex;
}

jsFiddle: https://jsfiddle.net/AndrewL32/xpdxyaz6/2/

NOTE:

As of May 2021, the Flex property compatibility for browsers are as follows:

Google Chrome Partial support with prefix v4 - v20 | Full support with prefix v21 - v28 | Full support v29+

Mozilla Firefox Partial support with prefix v2 - v21 | Partial support v22 - v27 | Full Support v28+

Internet Explorer Partial support with prefix v10 | Partial support with prefix v11+

Safari Partial support with prefix v3.1 - v6 | Full support with prefix v6.1 - v8 | Full Support v9+

Edge Full support v12+