i need to position elements in the same row as there in that picture but ened up with placing elements randomly plz help.
This is my code
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<ion-header>
<ion-toolbar>
<ion-buttons slot="primary">
<ion-button fill="none">
<ion-icon id="chat" src="assets/custom/chat.svg">
</ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="start">
<ion-button fill="none">
<ion-icon id="logoW" src="assets/custom/logo-W.svg" slot="icon-only"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title></ion-title>
<ion-grid>
<ion-row>
<ion-col size-sm="7" offset-sm="4" size-md="6" offset-md="3">
<img style="max-height:auto " src="../assets/img/gami2.png" />
</ion-col>
</ion-row>
</ion-grid>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-grid>
<ion-row>
<ion-col>
<div id="slides1">
<ion-slides #mySlider (ionSlidesDidLoad)="slidesDidLoad(mySlider)" [options]="sliderConfig" loop="true">
<ion-slide>
<img style="max-height:auto " src="../assets/img/1.png" />
</ion-slide>
<ion-slide>
<img style="max-height:auto" src="../assets/img/2.png" />
</ion-slide>
<ion-slide>
<img style="max-height:auto" src="../assets/img/3.png" />
</ion-slide>
<ion-slide>
<img style="max-height:auto" src="../assets/img/4.png" />
</ion-slide>
</ion-slides>
</div>
</ion-col>
</ion-row>
</ion-grid>
<!-- <ion-searchbar *ngIf="isShown" showCancelButton="true" (ionCancel)="isShown=false" searchIcon> </ion-searchbar>
<ion-buttons >
<button ion-button icon-only *ngIf="!isShown" (click)="isShown=true">
<ion-icon id="search"name="search">
</ion-icon>
</button>
</ion-buttons> -->
<ion-grid>
<ion-row>
<ion-col size="1" offset="1">
<span class="box">
<span class="container-2">
<span class="icon"><i class="fa fa-search"></i></span>
<input type="search" id="search" />
</span>
</span>
</ion-col>
<ion-segment [(ngModel)]="status">
<ion-col offset="2" size="2">
<ion-segment-button color="primary" value="on">
<ion-label>Ongoing</ion-label>
</ion-segment-button>
</ion-col>
<ion-col size="2" offset="4">
<ion-segment-button value="up">
<ion-label>Upcoming</ion-label>
</ion-segment-button>
</ion-col>
</ion-segment>
<ion-col size="1" offset="10">
<ion-icon id="filter" name="switch"></ion-icon>
</ion-col>
</ion-row>
</ion-grid>
<div [ngSwitch]="status">
<ion-grid *ngSwitchCase="'on'">
<ion-row>
<ion-col>
<ion-card *ngFor="let user of users">
<ion-icon name="close" class="close"></ion-icon>
<ion-icon src="assets/upcoimg/mark.svg"></ion-icon>
<ion-card-content>
<ion-card-title id="title" text-center>{{user}}</ion-card-title>
<ion-button color="danger" id="optin">Opt-in</ion-button>
<ion-icon name="eye" id="views"></ion-icon>
</ion-card-content>
<ion-card-footer>
<ion-icon src="assets/upcoimg/insta.svg" id="insta"></ion-icon>
</ion-card-footer>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-content>
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button color="dark">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
<ion-fab-list side="start">
<ion-fab-button color="dark">
<ion-icon name="logo-twitter"> </ion-icon>
</ion-fab-button>
<ion-fab-button color="dark">
<ion-icon name="logo-facebook"></ion-icon>
</ion-fab-button>
<ion-fab-button color="dark">
<ion-icon name="logo-instagram">Youtube</ion-icon>
</ion-fab-button>
</ion-fab-list>
</ion-fab>
ion-toolbar{
--background :black;
z-index: -1;
}
ion-button{
width: 50px;
height: 50px;
}
#chat{
height:40px;
width:40px;
}
#logoW{
height:40px;
width:40px;
}
ion-content{
--background:linear-gradient(to top, rgba(192,192,192,1) 88%,rgba(0,0,0,1) 50%);
background-size: cover;
background-repeat: no-repeat;
}
#slides1{
//width:50%;
//--ion-grid-padding-md: 0px 50px 0px 0px;
//padding-bottom: 50%;
}
body{
background: #343d46;
}
.box{
width: 300px;
height: 50px;
}
.container-2{
width: 300px;
vertical-align: middle;
white-space: nowrap;
position: relative;
}
.container-2 input#search{
width: 30px;
height: 30px;
background:transparent;
border: none;
font-size: 12pt;
float: left;
color: #262626;
padding-left: 35px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color:black;
-webkit-transition: width .55s ease;
-moz-transition: width .55s ease;
-ms-transition: width .55s ease;
-o-transition: width .55s ease;
transition: width .55s ease;
}
.container-2 input#search::-webkit-input-placeholder {
color: #65737e;
}
.container-2 input#search:-moz-placeholder { /* Firefox 18- */
color: #65737e;
}
.container-2 input#search::-moz-placeholder { /* Firefox 19+ */
color: #65737e;
}
.container-2 input#search:-ms-input-placeholder {
color: #65737e;
}
.container-2 .icon{
position: absolute;
height:45%;
width: 45%;
top: 40%;
margin-left: 6px;
margin-top: 9px;
color:black;
}
.container-2 input#search:focus, .container-2 input#search:active{
outline:none;
width: 260px;
background:gray;
color:black;
}
.container-2:hover .icon{
color:black;
}
/*search{
color:black;
--background :transparent;
height:50%;
widht:50%;
}*/
ion-segment{
--border-color:transparent;
--background-activated:transparent;
--background-checked:transparent;
--color:black;
--color-activated:black;
--color-checked:black;
--indicator-color-checked :black;;
--indicator-color-active :black;
height:50%;
width:50%;
padding-top:-20%;
}
#filter{
height:30px;
width:30px;
float:right;
top:50%;
}
ion-card{
--background:white;
--color:black;
height:150px;
width: 342px;
}
#title{
margin-top:-10%;
}
.close{
float:right;
}
#insta{
height:35px;
width:35px;
color:white;
float:left;
margin-top:20%;
padding-left: 10%;
}
/*ion-fab{
position: relative;
}*/
#optin{
margin-top:10%;
margin-right:-10%;
width:30%;
float:right;
}
#views{
float:right;
margin-top: 32%;
}
plz help me i am new to web development