Set IonCol side to side instead of stack. React - reactjs

Question

My code is working, I've been trying to figure out how to set the IonCol side to side instead of stack, it is responsive but the columns don't move, they stretch, any ideas how I could fix this?
const Home: React.FC = () => {
return (
<IonPage>
<IonHeader translucent={true}>
<IonToolbar color="danger">
<IonTitle>Portfolio</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<div id="container">
<IonGrid>
<IonRow>
<IonCol size-xs="12" size-md="4">
<img src="https://images.unsplash.com/photo-1425421669292-0c3da3b8f529?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1469&q=80" />
</IonCol>
<IonCol size-xs="12" size-md="8">
<div>
<h1>Batman</h1>
<h5>
<strong>The Knight</strong>
</h5>
</div>
</IonCol>
</IonRow>
</IonGrid>
<IonGrid>
<IonRow>
<IonCol size-xs="12" size-md="12">
<h2>About</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Deleniti facilis at nostrum modi ex aspernatur reiciendis
repellat? A beatae quo fugit est perferendis nobis optio
aliquid rem et blanditiis qui, asperiores molestias iste earum
neque consequatur placeat accusantium quos! Deserunt corrupti
vel minima asperiores. Quo molestias inventore sapiente
recusandae aliquam?
</p>
</IonCol>
</IonRow>
</IonGrid>
<div id="container">
<IonGrid>
<IonRow>
<IonCol size='8'>
<h1>Work Experience</h1>
</IonCol>
<IonCol size="8">
<IonAccordionGroup>
<IonAccordion value="first">
<IonItem slot="header" color="light">
<IonLabel>Head of technology, Avengers</IonLabel>
</IonItem>
<div className="ion-padding" slot="content">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing
elit. Harum, quod!
</p>
</div>
</IonAccordion>
<IonAccordion value="second">
<IonItem slot="header" color="light">
<IonLabel>CEO, Stark Industries</IonLabel>
</IonItem>
<div className="ion-padding" slot="content">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sit eveniet libero doloribus!
</div>
</IonAccordion>
<IonAccordion value="third">
<IonItem slot="header" color="light">
<IonLabel>CFO, IBM</IonLabel>
</IonItem>
<div className="ion-padding" slot="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Fugiat nesciunt voluptatibus saepe provident.
</div>
</IonAccordion>
</IonAccordionGroup>
</IonCol>
</IonRow>
</IonGrid>
</div>
<div id="container">
<IonGrid>
<IonRow>
<IonCol size="12">
<IonList>
<IonItem>
<h2>Technical Experience</h2>
</IonItem>
<IonGrid>
<IonRow>
<IonCol size='12'>
<IonItem>
<IonList>
<IonLabel>Java</IonLabel>
</IonList>
</IonItem>
</IonCol>
</IonRow>
</IonGrid>
<IonItem>
<IonLabel>Javascript</IonLabel>
</IonItem>
<IonItem>
<IonLabel>React</IonLabel>
</IonItem>
<IonItem>
<IonLabel>NodeJs</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Python</IonLabel>
</IonItem>
</IonList>
</IonCol>
</IonRow>
</IonGrid>
</div>
</div>
<IonFooter>
<IonToolbar>
<IonButton expand="full">
Tel. [phone] | Knight#batman.com
</IonButton>
</IonToolbar>
</IonFooter>
</IonContent>
</IonPage>
);
};
export default Home;
I tried setting different size-xs='4', size-md='8', just size='4' and size='8', putting it under the IonGrid but no success.
The column that says Work experience and its elements needs to be next to technical experience once the windows maximizes... responsive...

Answer 1

You are having them in different grids, they would align vertically. if you want some IonCols to stand horizontally, they should be in the same IonGrid and their combined size should be less than 12, otherwise it would go to next line because the size system divide a row into 12 units. something like this:
<IonGrid>
<IonRow>
<IonCol>
<h1>Work Experience</h1>
</IonCol>
<IonCol>
<IonList>
<IonItem>
<h2>Technical Experience</h2>
</IonItem>
...
</IonList>
</IonCol>
</IonRow>
</IonGrid>
Also size is not an attribute of IonGrid, it is for IonCol. if you want your grid's width to be limited, you should fix it in css and probably use css grid or flexbox etc.