How to hint Google Smart Lock to use a specific input field as the username when there is an active input field above the hidden username input field

Question

This is a similar question to this How to hint Google Smart Lock to use a specific input field as the username in a website.

The solution provided to the question didn't really work for my case. My use case is different in the way that there is an extra active input field above the hidden username field. Google Smart Lock will grab the value from the active input field instead of my hidden username input field

This is Chromium Design document talking about Google Smart Lock will use a display: none username but it doesn't mention my use case.

div {
  margin: 3px;
}

#email {
  display: none;
}

<form>
  <div>
    <label>Verification Code</label>
    <input type='text' />
  </div>
  <div>
    <input type='email' autocomplete='username' id='email' />
  </div>
  <div>
    <label>Password</label>
    <input type='password' autocomplete='new-password' />
  </div>
  <input type="submit" value="Verify">
</form>

Answer 1

short answer, put hidden email input first and then use css to reverse the order:

.flex-container {
  display: flex
  flex-direction: row;
}

Check out this article that explains how to make it work on Chrome, Firefox and Safari for 3 different cases: normal login, username first login and reset password page with verification input first.