Floating field labels

<!-- https://jsfiddle.net/WillCode4Cash/6arhkhaw/ -->
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<style>
    @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
    body,
    html {
      font-family: 'Source Sans Pro', sans-serif;
      padding: 50px 25px;
    }

    input:focus ~ .floating-label,
    input:not(:focus):valid ~ .floating-label {
      top: 4px;
      bottom: 10px;
      left: 20px;
      font-size: 11px;
      opacity: 1;
    }

    .controlContainer {
      position: relative;
    }

    .inputText {
      position: absolute;
      font-size: 14px;
      text-transform: uppercase;
      height: 55px;
      padding-left: 20px;
    }

    .floating-label {
      position: absolute;
      text-transform: uppercase;
      pointer-events: none;
      left: 20px;
      top: 18px;
      transition: 0.1s ease all;
    }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script>
$(document).ready(function(){

});
</script>
</head>
<body>
<div class="controlContainer">
  <input type="text" class="inputText form-control" required/>
  <span class="floating-label">Enter your email address</span>
</div>
</body>
</html>