How to change css of toast content?

I have added toastController to app for which I have to change the css of toast .
I have added cssClass to toastController , here is my code

 this.backToast = await this.toastController.create({
      message: "Do you  really want to exit app?",
      position: "middle",
      cssClass: "backtoast",
      buttons: [
          text: "Cancel",
          role: "cancel",
          handler: () => {},
          side: "end",
          text: "Ok",
          handler: () => {
            console.log("app exit");

and here is my css

.backtoast {
  --width: 300px;
  --button-color: #ffffff;
  --height: 100px;
  --border-radius: 17px;

now it is showing like below.

how can I change the position of toast-content and buttons? I have to show message in one line and button in line below.

Thank you.


Try --white-space:nowrap; in .backtoast class.

Hi there,
thank you for reply, I tried adding --white-space:nowrap; in .backtoast class.this made first sentence in one line, but is there any way by which I can move “Cancel” and “ok” button in second line? below my message


thank you

I suggest to use AlertController rather than ToastController