how to fix a button inside a div that is inside an IonSlide?

Question

I have three components are inside an IonSlides. I would like to fix "Registration" button of a component in bottonm of that IonSlides. how should I do?

Register.tsx:

<IonContent>
   <IonSlides>
      <IonSlide>
          <Search/>
      </IonSlide>             
      <IonSlide>
          <.../>
      </IonSlide>
      <IonSlide>
          <.../>
     </IonSlide>
  </IonSlides>
</IonContent>

Search.tsx:

...
return (        
<div>
     <div>  
          <StyledBody>
             ...
          </StyledBody>
        </div>
        <div
            css={css`
                position:sticky;
                bottom:0;
                overflow:inherit;
                `}>
            <StyledButton>
                Registration
            </StyledButton>
       </div>
</div>  
);

Answer 1

Try adding this css to the div containing your button:

display: flex;
align-items: flex-end;