CSS Card ionic left div with description

Question

I'm trying to get a card that looks like this:

What I have so far:

<ion-card>
  <ion-item>
    <ion-avatar item-start> <img src="img/marty-avatar.png"> </ion-avatar>
    <h2>Marty McFly</h2>
  </ion-item> <img src="img/advance-card-bttf.png">
  <ion-card-content>
    <p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p>
  </ion-card-content>
</ion-card>

Can someone help me?

Answer 1

Use ionic responsive grid:https://ionicframework.com/docs/theming/responsive-grid/

See code:https://stackblitz.com/edit/ionic-i21sbi?file=pages/home/home.html

<ion-card>
  <ion-grid>
   <ion-row>
    <ion-col>
  <img src="https://material.angular.io/assets/img/examples/shiba1.jpg">
  </ion-col>
  <ion-col>
  <ion-item>
    <ion-avatar item-start> <img src="https://material.angular.io/assets/img/examples/shiba1.jpg"> </ion-avatar>
    <h2>Marty McFly</h2>
  </ion-item> 
  <ion-card-content>
    <p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p>
  </ion-card-content>
  </ion-col>
   </ion-row>
  </ion-grid>

</ion-card>