bootstrap input-group-addon not displaying same width

Question

I am using twitter bootstrap input-group with input-group-addon to display some font awesome icons. I have text area and a multiselect dropdown control with input-group-addon span for each. But the span is displayed with different width. Both are not aligned at the edges. Below is the sample code from my webpage. How could I change the width?

<div class="input-group">
    <span class="input-group-addon fa fa-comments"></span>
    <div>
        <textarea id="description" name="description" placeholder="Widget description has limit of 512 characters" rows="6" class="form-control" spellcheck="1">Description</textarea>
        <div id="charlimit" style="float: right; display: none;">Widget description (<span id="maxlength">5</span> characters left)</div>
    </div>
</div>

<div class="input-group">
    <span class="input-group-addon fa fa-location-arrow"></span>
    <select id="availablePositions" class="multiselect form-control" name="positions[]" multiple="multiple" data-validation="required" data-validation-error-msg="Position required" style="display: none;">
        <option value="1">Full width - Top of page</option>
        <option value="2">Full width - Below navigation</option>
        <option value="3">Full width - Below content</option>
    </select>
</div>

Answer 1

You can fix this issue by overriding the input-group-addon class to set the min-width property.
Copy this below css to your css file and try now.

.input-group-addon {
    min-width:50px;// Set whatever the width you want
}