I am facing an issue in my ionic/angular project where I am attempting to create two columns within a row using ion-grid, ion-row, and ion-col. However, the content of the second column is unexpectedly appearing below the first column instead of beside it. Here is the snippet of my HTML code:
<ion-grid>
<ion-row style="border: none;" *ngFor="let word of words; let i = index">
<ion-col style="border: none;">{{ word | acrossWord }}</ion-col>
<ion-col style="border: none;">{{ word | downWord }}</ion-col>
</ion-row>
</ion-grid>
I'm puzzled by this behavior and wondering what could be causing it, as well as how I can fix it. Any insights would be appreciated.