dynamic input field

index.html

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class='container'>
  <div class='inputs'>
    <div class='name'>
      <label for='name' class='name-label' id='name-label'>Your Name</label>
      <input type='text' name='name' id='name-field' required>
    </div>
    <div class='submit'>
      <a href='#' id='submit' class='submit'><i class="fa fa-sign-in" aria-hidden="true"></i></a>
    </div>
  </div>
</div>

script.js

  $(document).ready(function() {

    // lost focus
    $('input').blur(function() {
      if($('#name-field').val().length === 0 ) {
        $('#name-label').removeClass("is-focused");
      }
    })
    //has focus
    .focus(function() {
      $("#name-label").addClass("is-focused");
    });
    
    $('#submit').click(function() {
      alert($('#name-field').val());
    })
    
  });

style.scss

$font_size: 12px;
@mixin font($size: $font_size, $bold: 400){
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: $size;
  font-weight: $bold;
}

.wrapper, html, body {
  height: 100%;
  margin: 0;
}

.container{
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  .inputs{
    display: flex;
    flex-direction: row;
    align-items: center;
    @include font(12px);
    .submit{
      display: flex;
      height: 40px;
      width: 40px;
      a{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;
        border-radius: 32px;
        text-decoration: none;
        font-size: 1.2em;
        transition: 0.3s;
        color: black;
        &:hover{
          transition: 0.3s;
          background-color: #B0B0B0;
        }
        &:active{
          transition: 0.15s;
          color: white;
          background-color: #5A5A5A;
        }
      }
    }
    .name{
      input[type=text] {
        border: none;
        border-bottom: 2px solid gray; 
        width: 190px;
        height: 20px;
        font-size: 1.2em;
        outline: none;
        padding: 0px;
        margin-top: 15px;
        margin-right: 15px;
        transition: all 200ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 
      }
      
      input[type=text]:focus,
      input[type=text]:valid{
        transition: 0.3s;
        border-bottom: 2px solid #218ccf;        
      }
      
      .name-label{
        position: absolute;
        transition: all 200ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
        transform: translate3d(0,12px,0);
        font-size: 1.5em;
        color: grey;
      }
      
      .is-focused{
        position: absolute;
        transition: all 200ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
        transform: translate3d(0,0,0);
        font-size: 1em;
        color: #218ccf;
      }
      
    }
  }
}