Labels not aligned on top left side above text inputs

I've been trying to get the labels to be on the left side above the text input, but all I've managed to do is make it towards the center instead. What am I doing wrong? Sorry if the way I'm labelling things seem odd, I'm still very new to HTML and CSS.

The output that I want

The output I'm getting

HTML

<div class="account-form">
      <form action="/account-sign-up">
        <div>
          <label for="first">First Name</label>
          <input
            id="first"
            type="text"
            placeholder="e.g. Wan"
            name="first"
            required
          />
        </div>

        <div>
          <label for="last">Last Name</label>
          <input
            id="last"
            type="text"
            placeholder="e.g. Aiman"
            name="last"
            required
          />
        </div>

        <div>
          <label for="email">Email</label>
          <input
            id="email"
            type="email"
            placeholder="e.g. wanaiman@gmail.com"
            name="email"
            required
          />
        </div>

        <div>
          <label for="password">Password</label>
          <input
            id="password"
            type="password"
            placeholder="Must be 9-20 characters"
            name="password"
            minlength="9"
            maxlength="20"
            required
          />
        </div>

        <input type="submit" value="Sign in" />

        <div id="account-extra">
          Already have an account?
          <a href="sign-in.html" id="account-link">Sign In</a>
        </div>
      </form>
    </div>

CSS

.account-form {
  margin-top: 55px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

label {
  color: white;
  display: block;
  margin-top: 30px;
  font-family: "Epilogue", sans-serif;
  font-weight: 600;
  font-size: 20px;
}

input {
  display: block;
  width: 550px;
  margin: 0 auto;
  background-color: #f0f3ff;
  color: #666666;
  padding: 15px;
  border-radius: 10px;
  border: 2px solid transparent;
  outline: none;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.5s;
}

input:hover {
  background-color: white;
}

input:focus {
  cursor: text;
  color: #303030;
  background-color: white;
  border-color: #303030;
}

input[type="submit"] {
  display: block;
  color: white;
  background-color: black;
  font-family: "Epilogue", sans-serif;
  font-size: 15px;
  font-weight: 600;
  margin-top: 40px;
}

input[type="submit"]:hover {
  color: black;
  background-color: #f0f3ff;
}

#account-extra {
  font-family: "Epilogue", sans-serif;
  color: white;
  margin-top: 30px;
}

#account-extra a {
  color: white;
  text-decoration: none;
  font-weight: 900;
}