Angular Select Multiline select

html<mbsc-select
    data={myData}
    [itemHeight]="60"
    [itemTemplate]="itemTemp"
    [maxWidth]="400"
    [touchUi]=""
>
    <ng-template #itemTemp let-item>
        <div class="my-multi-lines-item"><span class="my-multi-lines-text" >{{item.display}}</span></div>
    </ng-template>
</mbsc-select>

tsmyData = [
    { value: 1, text: 'Percentage of assets covered by systematic risk assessments (>99)' },
    { value: 2, text: 'Number of personal vacancies in the security roles required for ISMS (Nil)' },
    { value: 3, text: 'Time taken to grant, change and remove access privileges (Max. 2 hours)' },
    { value: 4, text: 'Percentage of agents covered by an effective security awareness program (100%)' },
    { value: 5, text: 'Number of security access violations (<2)' },
    { value: 6, text: 'Number of emergency changes (<5)' },
    { value: 7, text: 'Number of security incidents involving malicious code (Max. 2)' },
    { value: 8, text: 'Number of systems where security requirements are not met (Max. 2)' },
    { value: 9, text: 'Average turnaround time of incidents (Max. 2 hours)' },
    { value: 10, text: 'Number of pending actions to meet response and recovery requirements (Max. 5)' },
    { value: 11, text: 'Number of scheduled internal audits not done (Max. 1)' },
    { value: 12, text: 'Number of scheduled penetration tests not done (Max. 1)' },
    { value: 13, text: 'Number of overdue actions arising out of audit reports (Max. 5)' },
    { value: 14, text: 'Number of changes not carried out as per change control procedure (Max. 1)' }
];

css.my-multi-lines-item {
    font-size: 14px;
    white-space: initial;
    display: flex;
    height: 60px;
    line-height: normal;
}

.my-multi-lines-text {
    margin-top: auto;
    margin-bottom: auto;
}