Dropdown select within my header
<p>I am creating a monitoring system and I need the ability to select different amount of days. I want it styled kind of like this.</p>

<p><strong>Previous</strong> [Dropdown here] <strong>Days</strong></p>

<p><a href="https://i.stack.imgur.com/ysk6X.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ysk6X.png" alt="dropdown style"></a></p>

<p>As you can see there is no border, I want the text to flow so if its 60 days there isn't lots of space to the right, when its 120/365 it looks okay but 2 digits has too much space on the right.</p>

<p>What is the best solution for this?</p>

<p>This is my HTML</p>

<pre><code>&lt;div class="col-md-12"&gt;
    &lt;h4&gt;Previous
    &lt;select name="" id='daySelect'&gt;
        &lt;option disabled='disabled' selected&gt;Select Day&lt;/option&gt;     
        &lt;option value="30"&gt;30&lt;/option&gt;
        &lt;option value="60"&gt;60&lt;/option&gt;
        &lt;option value="90"&gt;90&lt;/option&gt;
        &lt;option value="120"&gt;120&lt;/option&gt;
        &lt;option value="365"&gt;365&lt;/option&gt;
    &lt;/select&gt;
    Days
    (All Agencies)&lt;/h4&gt;
&lt;/div&gt;
</code></pre>

<p></p>

<p>This is my CSS</p>

<pre><code>  #daySelect {
        width: 45px;
        border: 1px solid transparent;
        outline: none;
    }

    select {
        -moz-appearance: none;
        text-indent: 0.01px;
        text-overflow: '';
    }
</code></pre>

<p><a href="https://jsfiddle.net/3d9o4x6u/" rel="nofollow noreferrer">Fiddle</a></p>