Ion-icon position beside ion-card - css

Question

I have an ion-card in an ion-footer. It has an ion-textarea in it, as it will be used for a chat window. I am trying to place an icon beside the ion-card (an arrow) so a user can submit a message.
Whether I put the icon inside the ion-card, inside the ion-card-content, inside or outside the ion-footer, it just doesnt have the right positioning. If I put it inside the footer, it doesn't even show. If I put it outside the footer, it obviously rests on top or on the bottom of the footer.
<IonFooter style={{backgroundColor: 'white'}}>
<IonCard style={{width: '75%'}}>
<IonCardContent>
<IonTextarea
placeholder="Enter message here..."
value={text}
ionChange={e => setText(e.detail.value)}
/>
</IonCardContent>
</IonCard>
<IonIcon icon={arrowForwardSharp} size={"large"} color={"black"} />
</IonFooter>
Inside the footer (its below but you can't see it for some reason, even if i use a black icon)
Outside the footer (strangely places in a black box)

Answer 1

You can try by adding a grid inside you ionCard and adapt the number of col
If you want the icon separated from the textarea
<ion-footer>
<ion-card>
<ion-card-content>
<ion-grid>
<ion-row>
<ion-col><ion-textarea placeholder="Enter message here..."></ion-textarea></ion-col>
<ion-col>
<ion-item><ion-icon name="arrow-forward"></ion-icon></ion-item></ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
</ion-footer>
If you want the icon "inside" :
<ion-item>
<!-- <ion-label position="floating">Write Here</ion-label> -->
<ion-textarea></ion-textarea>
<ion-icon name="send" color="primary" slot="end"></ion-icon>
</ion-item>