Issue with width & styling

Hi there,

I have been trying to use as little manual CSS as possible for this project but I am having an issue with the positioning of items on screen. I want to have the arrows like in the below picture on the very far right on the screen on both mobile and web and I can do it by adding the following on the last column:


Below is my code:

<IonContent fullscreen>
    <IonGrid fixed={true}>
        {error && <p>{error}</p>}
        {isPending && <p>Loading...</p>}
        {data && Sports) => (
            <IonList key={data.idSport}>
                <IonRow className={"ion-align-items-center"}>
                            <IonImg src={handleSport(data.strSport)} />
                        <Link to={`/countries/${data.strSport}`}>
                            <IonIcon size={"large"} icon={arrowForwardCircleOutline}/>

The first screenshot is without the alignment of the text and as you can see theres a large amount of space to the right

As can be seen in the second screenshot I have added the ion-text-end to the column but the center text is off to the left

If anyone has any tips on the above it would be greatly appreciated!