Floating label problem(CSS)

1

https://codepen.io/codeobsession/pen/Ymzvyw
The label is not translating ,is there any problem with the code

2

It is translated, it has been moved 20px to the left and 20px up from where it would normally be. The styles are working exactly as specified in the code, what were you expecting to see?

3

I updated the code ,take a look once.

4 
Try it like this: 
HTML->
 <div class="form_elems">
       <input type="text" name="text" id="text">
       <label>Fill in your Name</label>
       <button>Submit</button>
</div>
CSS->
**Add this style:**
#text:focus ~ label{   
    transform:translate(-20px,-40px);
}

**Update the following styles like this:**
#text {
    background: none;  color: #F4D03F;  padding: 5px;  margin-bottom: 20px;  border: none;
    border-bottom: 2px solid #3498DB;  background-color: transparent; outline: none; z-index: 1;
}
.form_elems{
  display:flex;  justify-content:center;  align-items:center;  height:auto;  margin-top:15vmax;
  flex-direction:column;  position:relative; 
}