HTML form label text moving when entered many characters

The label text on my custom HTML form is moving when entering too many characters. I have attached a picture for visual reference. If I were to add more characters the label text would completly dissapear. I would really appreciate if you can help me out here. Picture of form

Here is an example of what my labels code look like:

        <label>
          Last Name
          <span class="l-name">
            <input
              type="text"
              id="lastname"
              name="lastname"
              placeholder="Last Name"
              required=""
            />
          </span>
        </label> ```