label is not floating to the top - html

Question

I want to have the textfield just like gmail has right now. I mean when we focus on the text field, the label or placeholder goes to the top exactly at the top border line of its text field with no border line on the background of the label only. I tried but could not make it happen and i found the code in internet which did not work either. Here is what the code is
.FieldWrapper input[type="text"] {
box-sizing: border-box;
width: 100%;
height: calc(3em + 2px);
margin: 0 0 1em;
padding: 1em;
border: 1px solid #ccc;
background: #fff;
resize: none;
outline: none;
}
.FieldWrapper input[type="text"]:focus {
border-color: #00bafa;
}
.FieldWrapper input[type="text"]:focus+label[placeholder]:before {
color: #00bafa;
}
.FieldWrapper input[type="text"]:focus+label[placeholder]:before,
.FieldWrapper input[type="text"]:valid+label[placeholder]:before {
transition-duration: 0.2s;
-webkit-transform: translate(0, -1.5em) scale(0.9, 0.9);
transform: translate(0, -1.5em) scale(0.9, 0.9);
}
.FieldWrapper input[type="text"]:invalid+label[placeholder][alt]:before {
content: attr(alt);
}
.FieldWrapper input[type="text"]+label[placeholder] {
display: block;
pointer-events: none;
line-height: 1.25em;
margin-top: calc(-1em - 2px);
margin-bottom: calc((3em - 1em) + 2px);
}
.FieldWrapper input[type="text"]+label[placeholder]:before {
content: attr(placeholder);
display: inline-block;
margin: 0 calc(1em + 2px);
padding: 0 2px;
color: #898989;
white-space: nowrap;
transition: 0.3s ease-in-out;
background-image: linear-gradient(to bottom, #fff, #fff);
background-size: 100% 5px;
background-repeat: no-repeat;
background-position: center;
}
<div class="FieldWrapper">
<input type='text' name="name" />
<label alt="field name" placeholder="field name" />
</div>
This is what exactly i was expecting

Answer 1

Try this:
.input-container {
position: relative;
font-family: Arial;
}
.input-container input {
height: 32px;
line-height: 24px;
border-radius: 8px;
border: 1px solid #dcdcdc;
min-width: 300px;
padding: 4px 8px;
transition: all .2s ease;
}
.input-container label {
position: absolute;
top: 12px;
left: 4px;
background-color: #fff;
padding: 0 4px;
font-size: 14px;
pointer-events: none;
transition: all .2s ease;
}
.input-container input:focus {
outline: none;
border: 1px solid #3f51b5;
}
.input-container input:valid + label,
.input-container input:focus + label {
top: -8px;
color: #3f51b5;
}
<div class="input-container">
<input id="my-input" type="text" required>
<label for="my-input">My input label</label>
</div>