Как сделать элементы внутри нескольких <mat-option> из <mat-select> даже по ширине? (Угловой)

Question

Я пытаюсь создать компонент фильтра, который мы можем использовать во всех наших приложениях.Мы делаем это, используя материально-угловую библиотеку.

Работает нормально, показывает список продуктов для выбора, но, как вы можете видеть, каждая итерация mat-option возвращает два значения, краткое описаниеи длинное описание.

Как вы можете видеть, ширина различных опций меняется в зависимости от ширины краткого описания (одноговыделено жирным шрифтом).

Я пытаюсь добиться того, чтобы ширина опций соответствовала ширине самого длинного текста, как показано ниже.

Я не могу использовать фиксированный размерпотому что это всего лишь один из МНОГИХ фильтров, которые я собираюсь использовать, и мне нужно глобальное решение, которое позволило бы мне повторно использовать компонент фильтра.

<mat-form-field>
    <mat-select [ngSwitch]="filter.className" (focus)="getValuesActiveFilter(filter)" (selectionChange)="checkFilters()"
        [formControl]="filter.control" placeholder="{{filter.placeholder|i18n}}" [multiple]="filter.multiple">
        <span *ngSwitchDefault class='filter-default'>

            <mat-option class='mat-flex' *ngFor="let valor of filter.filteredValues | async" [value]="valor">
                <span class='short-desc'>
                    <filters-render [renderTagYesNo]="false" [valor]="valor" [filter]="filter"></filters-render>
                </span>
                <span class='long-desc'>
                    &nbsp;{{valor.desc}}
                </span>
            </mat-option>

        </span>
    </mat-select>
</mat-form-field>

.mat-option-text{
        display: flex!important;

        .short-desc{ flex: 0 0 auto;}
        .long-desc{ flex: 1 0 auto;}
    }