JSFiddle - React, Tailwind, and code Playground

HTML

<select name="timezones" id="timezones">
    <option value="1">Pacific/Auckland +11:00 +13:00 </option>
    <option value="2">Australia/Brisbane +10:00 +11:00</option>
     <option value="3">Aust +10:00 +11:00 </option>
    <option value="3">A +10:00 +11:00 </option>
</select>

CSS

select{
    font-family:"Courier New", Courier, monospace
}

JavaScript

var spacesToAdd = 5;
var biggestLength = 0;
$("#timezones option").each(function(){
var len = $(this).text().length;
    if(len > biggestLength){
        biggestLength = len;
    }
});
var padLength = biggestLength + spacesToAdd;
$("#timezones option").each(function(){
    var parts = $(this).text().split('+');
    var strLength = parts[0].length;
    for(var x=0; x<(padLength-strLength); x++){
        parts[0] = parts[0]+' '; 
    }
    $(this).text(parts[0].replace(/ /g, '\u00a0')+'+'+parts[1]).text;
});