Javascript jQuery Angular React
html<label>
    Multiple lines
    <input mbsc-input id="my-select" data-dropdown="true" />
</label>
js$('#my-select').mobiscroll().select({
    itemHeight: 60,
    maxWidth: 400,
    data: [
        { 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)' }
    ],
    renderItem: function (item) {
        return '<div class="my-multi-lines-item"><span class="my-multi-lines-text">' + 
            item.display + '</span></div>';
    },
    touchUi: 
});
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;
}