<h2>Using the <code>vertical-align</code> property on inline elements</h2>

<div class="va">
  <input type="email"> TEXT EXAMPLE
</div>

<div class="vabtn">
  <button>baseline</button>
  <button>top</button>
  <button>text-top</button>
  <button>text-bottom</button>
  <button>super</button>
  <button>sub</button>
  <button>middle</button>
  <button>bottom</button>
</div>

<p>Press the different buttons to change the <code>vertical-align</code> value of the input element.</p>

<p class="p">Demo by Louis Lazaris. <a href="http://www.sitepoint.com/12-little-known-css-facts-the-sequel" target="_blank">See article</a>.</p>

body {
  text-align: center;
}

.va {
  margin-top: 40px;
  font-size: 60px;
  line-height: 1.3;
}

.vabtn {
  margin-top: 50px;
}

.va input {
  vertical-align: baseline;
  font-size: 14px;
}

.p {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding-top: 130px;
}

var vabtns = document.querySelector('.vabtn').querySelectorAll('button');

for(var i=0;i < vabtns.length; i++) {
   (function(index) {
     vabtns[index].addEventListener('click', function(){
       document.querySelector('.va input').style.verticalAlign = vabtns[index].innerHTML;
     });
   })(i);
}