I've been following a tutorial to create an animation on an input and label. I successfully did it once today in school, but for some reason, it's not working now.
My objective is to have the label inside the "input" field, with the input taking up the full size of the div. However, when I use pos absolute on the label, it seems to go outside the "form" div and I can't figure out why.
.register {
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
}
.form {
position: relative;
width: 50%;
height: 50px;
}
.form input {
position: relative;
height: 100%;
width: 100%;
color: white;
border: none;
padding-top: 20px;
}
.form label {
position: absolute;
bottom: 0px;
}<div class="register">
<h1>Register</h1>
<div class="form">
<input type="text" name="firstN" autocomplete="off" required>
<label for="firstN"><span>Name</span></label>
</div>
</div>