form {
  text-align: center;
}

label {
  display: block;
  letter-spacing: 4px;
  padding-top: 15px;
  text-align: center;
}
label .label-text {
  color: #9B9B9B;
  cursor: text;
  font-size: 20px;
  text-transform: uppercase;
  -moz-transform: translateY(-15px);
  -ms-transform: translateY(-15px);
  -webkit-transform: translateY(-15px);
  transform: translateY(-30px);
  transition: all 0.3s;
}
label input {
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid #4A4A4A;
  color: black;
  font-size: 15px;
  letter-spacing: -1px;
  outline: 0;
  padding: 5px 20px;
  text-align: center;
  transition: all 0.3s;
  width: 200px;
}
label input:focus {
  max-width: 100%;
  width: 400px;
}
label input:focus + .label-text {
  color: black;
  font-size: 13px;
  -moz-transform: translateY(-50px);
  -ms-transform: translateY(-50px);
  -webkit-transform: translateY(-50px);
  transform: translateY(-50px);
}

label input:valid + .label-text {
  font-size: 13px;
   -moz-transform: translateY(-50px);
  -ms-transform: translateY(-50px);
  -webkit-transform: translateY(-50px);
  transform: translateY(-50px);
}