JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <label>I would like to style this in a manner in which the months, years, and title are aligned with each other</label>
    <select id="news2">
        <option selected value="Click Here"></option>
        <option value="1">    JAN  2000 - Title 1     </option>
        <option value="2">    FEB  1191 - Title 2     </option>
        <option value="3">    MAR  2014 - Title 3     </option>
        <option value="4">    APR  1995 - Title 4     </option>
        <option value="5">    MAY  2034 - Title 5     </option>
        <option value="6">    JUNE 2210 - Title 6     </option>
        <option value="7">    JULY 1991 - Title 7     </option>
    </select>
</form>
<p>As you can see in the drop down the text doesn't line up like it does in the code. I am aware of html ignoring white-space I just put it in the code like that to demonstrate how I would like the drop down to look like. </p>

CSS

form {
    display: block;
    margin: 20px;
}
label {
    display: block;
    width: 100%;
}
select {
    margin: 20px;
    width: 200px;
    height: 20px;
    font-size: 16px;
}
p {
    margin: 20px;
    width: 700px;
}