How to align the content shown in the image using ionic react along with redirecting to another page

Ionic Framework Ionic React
1

I am working on Ionic react . I am bit troubled in aligning the content as shown in the image. Along with that I need to redirect to page 1 by clicking on content section and redirect to page 2 by clicking the icon separately. I have used IonItem , but I couldn’t align it properly. How can I solve it ?ionic react components
Screenshot (202)

2

Probably just need to use regular html here like

<div>
  <div style={{display: 'flex'}}>
    <div style={{display: 'flex', flexDirection: 'column'}}>
      <div>Name: </div>
      ....
    </div>
   <div style={{width: '50%'}}>
    <IonIcon icon={name} />
   </div>
  </div>

<div>
// This is row 2, time duration etc
</div>
</div>
3

Oh then you can add onClick to the icon or icon div and have it go to a different route, using navContext

  const navContext = React.useContext(NavContext);
navContext.navigate('/');
4

where is your code that you tried?