Openining PopOver control and show a div with larger width - css

Question

I've inherited an existing Angular application that uses Ionic Framework (in the past it was used for web and mobile, so that's why they choose to use Ionic Framework), btw now I need to extend the version that's used in the web version and using the popover what happens is that I'm unable to show it with a larger width than the space occupied from where it's opened.
You can see what happens in the this image
What I need to achieve is something like this mockup, as you can see it has a "div" that extends on the right, and what I need is to show the date picker side by side (If I'll be able to take space I need)
Here's the code, starting from the main page
<ion-grid>
<ion-row>
<ion-col size=2>
<button (click)="onDetailPageOpen();" class="scheduleButton">
Schedule<mat-icon>list</mat-icon></button>
</ion-col>
<ion-col size=2>
<button expand="full" (click)="presentPopover($event)" class="advancedSearchButton">
Advanced Search<mat-icon>tune</mat-icon>
</button >
</ion-col>
<ion-col size=4>
<input type="text" class="searchHere" placeholder="Search here" [(ngModel)]="SearchService.SearchText" />
</ion-col>
<ion-col size=1 style="padding-left: 135px;">
<button routerLink="#" class="searchButton">
<mat-icon>search</mat-icon>
</button>
</ion-col>
<ion-col size=>
</ion-col>
</ion-row>
</ion-grid>
Then the presentPopover method
async presentPopover(ev: any) {
const popover = await this.popoverController.create({
component: PopoverComponent,
componentProps: {},
event: ev,
// translucent: true
});
await popover.present();
}
and finally the PopOverControl with the buttons
<ion-grid class="ionGrid">
<ion-row>
<ion-col size="2">
<ion-button (click)="dateFilterPopover($event)">
<span class="material-icons icon">
<span class="material-icons-outlined">
date_range
</span>
</span>
</ion-button>
</ion-col>
<ion-col size="2"></ion-col>
<ion-col size="2">
<ion-button (click)="userSortPopover($event)">
<span class="material-icons icon">
person
</span>
</ion-button>
</ion-col>
<ion-col size="2"></ion-col>
<ion-col size="2">
<ion-button>
<span class="material-icons iconRef">
refresh
</span>
</ion-button>
</ion-col>
</ion-row>
</ion-grid>
Then the dateFilterPopOver
async dateFilterPopover(ev: any) {
const popover = await this.popoverController.create({
component: PopoverDateComponent,
componentProps: {},
event: ev,
translucent: true
});
await popover.present();
}
and the 2 datepicker at the end
<ion-item>
<ion-label>Date From</ion-label>
<ion-datetime
pickerFormat="MMM YYYY"
displayFormat="MMM YYYY"
[(ngModel)]="searchService.SearchDateFrom">
</ion-datetime>
</ion-item>
<ion-item>
<ion-label>Date To</ion-label>
<ion-datetime
pickerFormat="MMM YYYY"
displayFormat="MMM YYYY"
[(ngModel)]="searchService.SearchDateTo">
</ion-datetime>
</ion-item>
Any help please?
Thanks