Placeholder move on focus

input.html

<h1>The floating label</h1>
<div class="input-wrapper">
  <input type="text" name="email" required/>
  <label>Your email address</label>
</div>

style.scss

$padding: 14px;
$input-line-height: 16px;

.input-wrapper{
  padding: $padding;
  position: relative;

  input {
    padding: $padding;
    line-height: $input-line-height;
    font-size: 14px;
    outline: none;
    border:none;
    border-bottom: 1px solid #777;
    &:focus {
      border-color: #2196F3;
	    border-width: medium medium 2px;
    }
  }

  input ~ label {
    position: absolute;
    top: ($padding*2);
    left: $padding + 4px;
    font-size: 14px;
    opacity: 0.4;
    transition: 0.2s ease all;
  }

  input:focus ~ label,
  input:not(:focus):valid ~ label {
    top: 0;
    color: #2196F3;
    opacity: 1;
    font-size: 11px;
  }
}