#login-form {
    display: grid;
    /* The result message is just long enough to stretch the form.
     * The solution is to make the first column wider than the labels need it to be.
     * Similarly, the validation messages vary in width.
     * Normally, that wouldn't be a problem.
     * However, because the form is centered, changes cause the form to jump sideways a few pixels.
     * The solution is to make the last column wider than the messages need it to be.
     */
    grid-template-columns: minmax(6em, max-content) minmax(min-content, max-content) minmax(1em, max-content);
    gap: 0.5em;
}

#login-form > label {
    justify-self: end;
}

#login-form > button,
#result {
    grid-column: 1 / span 2;
    justify-self: end;
}

input[type=email],
input[type=password] {
    width: 12em;
}