If this is the wanted result you need to update the content of <mat-option>
as it follows:
<mat-form-field>
<mat-label>Toppings</mat-label>
<mat-select [formControl]="toppings" multiple>
@for (topping of toppingList; track topping) {
<mat-option [value]="topping">
<div class="row">
{{topping}}
<button mat-button>Only</button>
</div>
</mat-option>
}
</mat-select>
</mat-form-field>
<style>
.row {
display: flex;
flex-direction: row;
}
</style>
For more infos on flex you could read this extensive guide and well written:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Of course using
is not elegant nor the best way to space stuff, you can go forward and add padding etc...