Can you explain why there is a gap in the label when it's positioned at left:0? I'm aiming to achieve a UI similar to Material design but struggling with label positioning. I've experimented with using translateY(-6px), however, this method isn't adaptable for labels of varying lengths.
.formField {
position: relative;
height: 40px;
}
.form {
position: absolute;
bottom: 0;
left: 0;
height: 40px;
}
.label {
position: absolute;
top: 0;
left: 0;
transform: translate(0, 24px) scale(1);
transition: all .3s ease-in;
}
input {
position: absolute;
bottom: 0;
left: 0;
}
input:focus+.label {
transform: translate(0, 1.5px) scale(.75);
}<div class="formField">
<form class="form">
<input type="text" class="name" />
<label for="name" class="label">Hello</label>
</form>
</div>