Ionic + React: align items in grid

I have an IonRow with two IonCol elements. Both contain a button. I would like one of these buttons to be placed at the beginning of its column, and the other at the end.

This seems complicated. As a temporary solution, I would also be happy with buttons being centered in their respective cols. I found this in the docs: https://ionicframework.com/docs/layout/grid#alignment

So my code now looks like this:

<IonRow className="ion-align-items-center ion-justify-content-center">
  <IonCol className="ion-align-items-center ion-justify-content-center">
    <IonButton ...
  </IonCol>
  <IonCol className="ion-align-items-center ion-justify-content-center">
    <IonButton ...
  </IonCol>
</IonRow>

But the classes have no effect on the UI.

How can I align the buttons properly?

try using the custom css float…

Hey, try this in index.html file paste this

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>

as you might have removed some css codes from your document…
hope this helps