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

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

<div class="vabtn">

<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;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.