Animated input placeholder

input-placeholder.html

<label class="reverse-input">
  <input type="text" placeholder="" required="">
  <em>Фамилия и имя</em>
</label>
<style>
.reverse-input {
  display: flex;
  flex-direction: column;
	& em {
	      padding: 0 5px;
	    position: absolute;
	    top: 7px;
	    left: 15px;
	    font-style: normal;
	    font-size: 16px;
	    transition: all 0.15s ease-in-out;
	    cursor: text;
	  }
	 & input:valid+em, & textarea:valid+em, & input:focus+em, & textarea:focus+em {
	    background-color: white;
	    top: -10px;
	    font-size: 12px;
	    color: #999999;
	}
  span {
    line-height: 1.2;
    margin-bottom: 5px;
  }
  *:first-child {
    order: 2;
  }
  input[required] + span:after{
    content: " *";
    color: red;
  }
  input, textarea {
    background-color: #f9f9f9;
    border: 1px solid #eeeeee;
  }
  input:focus, textarea:focus {
    border:  1px solid #ccc !important;
  }
}
</style>