Vertical align a side by side column in MaterializeCSS

Question

How do you typically vertical align "middle" the button in this example:

<div class="row">

  <div class="col s1">
    <h1>Foo</h1>
  </div>

  <div class="col s11 right-align">
    <a href="#" class="btn"><i class="material-icons left">add</i> Add</a>
  </div>

</div>

https://jsfiddle.net/zg9cjmr3/

As soon as I add valign-wrapper in the second inner div, it gets messed up:

https://jsfiddle.net/zg9cjmr3/1/

Answer 1

Add the valign-wrapper class to the row.

<div class="row valign-wrapper">

  <div class="col s1">
    <h1>Foo</h1>
  </div>

  <div class="col s11 right-align">
    <a href="#" class="btn"><i class="material-icons left">add</i> Add</a>
  </div>

</div>