Position card at the bottom and keep keyboard avoiding view

Hi,

I have something looking like this in my app currently.
But I’m having a really hard time styling in ionic.

How do I get the everything to be in the bottom, but not fixed since it needs to pan when the keyboard shows?

          <IonCard>
            <IonItem>
              <IonLabel position="stacked">Email</IonLabel>
              <IonInput
                type="email"
                autocomplete="email"
                value={loginInfo.email}
                required
                onIonChange={(e) =>
                  setLoginInfo({ ...loginInfo, email: e.detail.value! })
                }
              />
            </IonItem>

            <IonItem>
              <IonLabel position="stacked">Password</IonLabel>
              <IonInput
                type="password"
                value={loginInfo.password}
                autocomplete="current-password"
                required
                onIonChange={(e) =>
                  setLoginInfo({ ...loginInfo, password: e.detail.value! })
                }
              />
            </IonItem>
          </IonCard>