style=============

* {

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

} 

body {

  background: #C5E1A5;

}

form {

  width: 80%;

  max-width: 820px;

  margin: 60px auto;

  background: rgba(245,245,245,1);

  padding: 60px 120px 80px 120px;

  text-align: center;

  -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.1);

  box-shadow: 2px 2px 3px rgba(0,0,0,0.1);

}

label {

  display: block;

  position: relative;

  margin: 40px 0px;

}

input {

  width: 100%;

  padding: 10px;

  background: transparent;

  border: none;

  outline: none;

}

.line-box {

  position: relative;

  width: 100%;

  height: 2px;

  background: #BCBCBC;

}

.line {

  position: absolute;

  width: 0%;

  height: 2px;

  top: 0px;

  left: 50%;

  transform: translateX(-50%);

  background: #8BC34A;

  transition: ease .6s;

}

input:focus + .line-box .line {

  width: 100%;

}

.label-txt {

  position: absolute;

  top: -1.6em;

  padding: 10px;

  font-family: sans-serif;

  font-size: .8em;

  letter-spacing: 1px;

  color: rgb(120,120,120);

  transition: ease .3s;

}

.label-active {

  top: -3em;

}

button {

  display: inline-block;

  padding: 12px 24px;

  background: rgb(220,220,220);

  font-weight: bold;

  color: rgb(120,120,120);

  border: none;

  outline: none;

  border-radius: 3px;

  cursor: pointer;

  transition: ease .3s;

}

button:hover {

  background: #8BC34A;

  color: #ffffff;

}

=====html=========

<form>

  <label>

    <p class="label-txt">The first field</p>

    <input type="text" class="input">

    <div class="line-box">

      <div class="line"></div>

    </div>

  </label>

  <label>

    <p class="label-txt">The second one</p>

    <input type="text" class="input">

    <div class="line-box">

      <div class="line"></div>

    </div>

  </label>

  <label>

    <p class="label-txt">And another one</p>

    <input type="text" class="input">

    <div class="line-box">

      <div class="line"></div>

    </div>

  </label>

  <button>Don't send</button>

</form>

javascript=====================

$(document).ready(function(){

  $('input').focus(function(){

    $(this).parent().find(".label-txt").addClass('label-active');

  });

  $("input").focusout(function(){

    if ($(this).val() == '') {

      $(this).parent().find(".label-txt").removeClass('label-active');

    };

  });

});