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>
