.active {
  position: relative;
  background: #edb77d;
  padding: 14px 1px;
  margin-right: 7px;
  margin-left: 3px;
  border-radius: 24px;
  -moz-border-radius: 24px;
  -webkit-border-radius: 24px;
  -o-border-radius: 24px;
  -ms-border-radius: 24px; }
  .active:after {
    position: absolute;
    content: 'Person';
    right: 17px;
    top: 50%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    font-size: 11px;
    color: #222;
    font-weight: bold; }
  .active input + label {
    margin-right: 59px; }

form {
  padding: 72px 70px 70px 70px; }

.form-group {
  margin-bottom: 10px;
  position: relative; }

.form-input {
  padding-top: 21px; }

.form-label {
  position: absolute;
  transition: 0.25s ease;
  -moz-transition: 0.25s ease;
  -webkit-transition: 0.25s ease;
  -o-transition: 0.25s ease;
  -ms-transition: 0.25s ease;
  color: #bebebe;
  left: 0;
  top: 23px; }

input {
  transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  -ms-transition: 0.3s ease;
  padding-top: 10px;
  -webkit-appearance: none; }
  input:focus + .form-label, input:valid + .form-label {
    top: 1px;
    font-size: 11px;
    color: #edb77d;
}



<div class="form-group form-input">
    <input type="text" name="name" id="name" value="" required/>
    <label for="name" class="form-label">Your name</label>
</div>