Wrapping mat-chip-option before toggle not working when zoom is changed

I have a dropdown, inside that I have a

1. mat-chip list which is having 2 chipoptions
2. a mat-slide-toggle "All"

When All toggle is selected it will select both chipoptions So when we are changing browser zoom level, and if chipoptions has no space to fit, then the chipoptions should wrap first into multiple lines, but toggle should not wrap and remain same

initially

chip1 chip2 toggle


when zoom changes

eg:

chip1 toggle
chip2


chip2 should wrap below but toggle will remain in right side But again when we are further zooming then toggle is moving out of dropdown. So in this case if toggle does not have space to fit inside dropdown, then it should wrap and come below the 2nd chip option

eg:

chip1
chip2
toggle


I tried making css changes, but the thing happening it is wrapping firstly the toggle and then chipoptions. How can I make the above requirements work?

below is my html changes

<ng-template>
<div class="dropdown">
<mat-chip-listbox selectable multiple aria-label="opt group selection">
<mat-chip-option
*ngFor="let group of Options | slice: 1:3"
[id]="group.id"
[value]="group"
class="filter-chip"
[selected]="groupSelected(group)"
#gp
(click)="toggleGroupSelection(gp)"
>
{{ group.groupName }}
</mat-chip-option>
</mat-chip-listbox>
<mat-slide-toggle

(change)="toggle($event)"
>All</mat-slide-toggle
>
</div>
</ng-template>


this is my css

.dropdown {
padding-top: 5px;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: space-between;


}

Continue reading...