Angular2 query builder module remove button layout - css

Question

I am building a search UI in Angular 8 with the Angular Query Builder module.
The Angular2 query builder module is working correctly. I am customizing the styling for Angular Material following the customization instructions in the documentation. I am using Angular Material and Angular FlexLayout for the styling.
I want to move the "remove" button (the red X) all the way on the RIGHT side of the flex row, to the right of the "value" field.
The flexLayout settings should be showing all of the elements side-by-side in order. However, some sort of style is being applied that places it on the left side despite being the last element in the flex row. I have tried margin-left and other styles but was not able to figure out how to get the X to go all the way to the right side.
Here is the stackblitz:
https://stackblitz.com/edit/angular-aqyt4u?file=src/app/app.component.ts
Here is the snippet of markup for the customization of the remove button:
<!-- Query Builder -->
<query-builder [(ngModel)]='recordsQuerySet' [config]='config'>
<!-- Override remove button -->
<ng-container *queryRemoveButton="let rule; let removeRule=removeRule">
<div fxFlex>
<button type="button" mat-icon-button color="accent" (click)="removeRule(rule)">
<mat-icon>clear</mat-icon>
</button>
</div>
</ng-container>
<!-- etc -->
</query-builder>

Answer 1

You can add a custom class to remove rule button then set its position absolute, some thing like below:
In html file:
<button type="button" mat-icon-button color="accent" (click)="removeRule(rule)" class="remove-rule-btn">
<mat-icon>clear</mat-icon>
</button>
In css/scss file:
.remove-rule-btn{
position: absolute;
right: 5px;
}