Angular Материал: MultilineDropdown с разделителями - неверная высота

Question

Я пытаюсь создать раскрывающийся список, в котором выделенные элементы имеют несколько строк. Я сделал следующее:

<mat-form-field>
  <mat-label>Favorite animal</mat-label>
  <mat-select [formControl]="animalControl" required>
    <mat-option>--</mat-option>
    <mat-option *ngFor="let animal of animals" [value]="animal">
      {{animal.name}}<br>
      Sound:{{animal.sound}}
      <mat-divider></mat-divider>
    </mat-option>
  </mat-select>
  <mat-error *ngIf="animalControl.hasError('required')">Please choose an animal</mat-error>
  <mat-hint>{{animalControl.value?.sound}}</mat-hint>
</mat-form-field>

и соответствующие s css:

::ng-deep {

  .mat-select-panel mat-option.mat-option {
      height: unset;
    }

  .mat-option-text.mat-option-text {
      white-space: normal;
      line-height: normal;
      padding:  16px 0;
      /* make divider at the bottom of each option */
      border-bottom-width: thin;
      border-bottom-style: solid;
      border-bottom-color: yellowgreen;
    }
}

См. пример

Теперь я столкнувшись с проблемой, что <mat-divider> не совсем внизу. Можно было видеть разрыв между серой и yellowgreen линией.

Проблема с подходом использования некоторого кода scss заключается в том, что он применяется и для других раскрывающихся списков. Но я хочу применить его только к многострочным выпадающим спискам. То, что он остается на самом последнем элементе, является другой проблемой, которая могла бы быть легко с некоторыми <mat-divider *ngIf="!last"> - но я мог бы вынести эту проблему.

Есть ли простой (?) Способ иметь разделители только для определенного c выпадающий выбор?