Need to align my product slider content in same line. kindly help

Ionic Framework Ionic Angular
1

I have this product slider in my ionic application picture attached.
slider

I want to display all it’s content in same row, for eg: all products Name, Image, price and Add to cart button will have display on same line as like in following image.
2

This is my code for this slider

<ion-card>
    <ion-slides #trending [options]="sliderConfig" (ionSlidesDidLoad)="trandingDidLoad(trending)">
      <ion-slide *ngFor="let product of Tproducts">
        <div>
            <ion-fab vertical="center" horizontal="start" *ngIf="product.sale_price">
              <ion-fab-button translucent="true" size="small" color="danger"><ion-text ><strong>Sale!</strong></ion-text></ion-fab-button>
            </ion-fab>
            <ion-card-title>     
              <h4 [routerLink]="['/all-products',product.id]">
                {{ product.name }}
              </h4>
            </ion-card-title>
            <img style="width: 50%; height: 100%;" [routerLink]="['/all-products',product.id]" src="{{ product.images[0].src }}">
            <h5 [routerLink]="['/all-products',product.id]" *ngIf="!product.sale_price">
                  <strong>Price: {{ product.price }} INR </strong></h5>
            <h5 [routerLink]="['/all-products',product.id]" *ngIf="product.sale_price" size="4">
                   <strong>Price:</strong> <s> {{ product.regular_price }}</s> <strong> {{ product.sale_price }} INR</strong></h5>
              <ion-button expand="70%" (click)="addToCartT(product.id)">Add to Cart</ion-button>
        </div>
      </ion-slide>
    </ion-slides>
</ion-card>

Kindly help…

2

What I would do is use CSS Grid layout.