<label>
  <input type="text" />
  <div class="label-text">First name</div>
</label>
@import "compass"

body
  font-family: 'Open Sans', Helvetica

label
  display: block
  letter-spacing: 4px
  padding-top: 20px
  text-align: center

  .label-text
    font-size: 20px
    line-height: 20px
    text-transform: uppercase
    +transform(translateY(-20px))
    
  input:focus + .label-text
    font-size: 13px
    +transform(translateY(-40px))
View Compiled

External CSS

  1. https://fonts.googleapis.com/css?family=Open+Sans

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js