Text input - can't align text top or bottom, only center - css

Question

folks! I'm trying to align the text inside a text form input to be next to the line at the bottom, but it doesn't quite concede, insisting on being center aligned.
I've put some vertical-align: bottom on different elements, but it didn't work (it's on the code below).
Here is the codepen: https://codepen.io/ironsand-sou-eu/pen/zYEmEdw
HTML:
<div class="form-input field">
<input type="text" name="my_input" id="my_input" value="I'd love to be a little closer to the line below! Can you help me?">
<label for="my_input" data-title="Just some label"></label>
</div>
CSS:
.form-input {
width: 100%;
background-color: transparent;
border-bottom: 1px green solid;
border-top: none;
border-right: none;
border-left: none;
}
.form-input::before {
content: '';
position: absolute;
background-color: green;
left: 0;
bottom: 0;
width: 0;
height: 2px;
transition: ease-out 300ms;
}
.form-input:hover::before {
width: 100%;
}
.form-input:focus-within::before {
width: 100%;
}
.form-input input {
border: none;
width: 100%;
}
.form-input input:focus-visible {
outline: none;
}
.field {
position: relative;
margin-bottom: 15px;
vertical-align: bottom;
}
.field label::before {
content: attr(title);
position: absolute;
top: 0;
left: 15px;
line-height: 40px;
font-size: 14px;
color: #777;
transition: 300ms all;
}
.field input {
width: 100%;
line-height: 40px;
padding: 0 8px;
box-sizing: border-box;
font-size: 14px;
color: green;
vertical-align: bottom;
}

Answer 1

Place this at the bottom of the CSS section:
input[type=text] {
height: 15px;
}