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

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

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.

This is my code for this slider

    <ion-slides #trending [options]="sliderConfig" (ionSlidesDidLoad)="trandingDidLoad(trending)">
      <ion-slide *ngFor="let product of Tproducts">
            <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>
              <h4 [routerLink]="['/all-products',]">
                {{ }}
            <img style="width: 50%; height: 100%;" [routerLink]="['/all-products',]" src="{{ product.images[0].src }}">
            <h5 [routerLink]="['/all-products',]" *ngIf="!product.sale_price">
                  <strong>Price: {{ product.price }} INR </strong></h5>
            <h5 [routerLink]="['/all-products',]" *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(">Add to Cart</ion-button>

Kindly help…

What I would do is use CSS Grid layout.