Bootstrap input-group-addon alignment issue when a span is added for required asterisks

It looks like the problem is that you put a <label> inside the input-group but only input-group-addon, input-group-btn and form-control should be inside the input-group. That <label> is forcing the icons to stretch to accommodate the label. So I removed the <label> and put it outside the input-group. After I did that, the asterisk addon worked fine.

Here is a fiddle with my changes: https://jsfiddle.net/ezvzvvqg/18/

Here it is in Stack Snippet form:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<table class="table table-user-information" style="font-size:12px;">
    <tbody>
        
        <tr>
            <td class="tdPopupTextDescription">Effective Date:</td>
            <td id="tdEffectiveDate">          
                <div id="divDatePickerEffectiveDate" class="input-group date" data-provide="datepicker" data-date-show-on-focus="true">
                    <input type="text" class="form-control required error" id="txtEffectiveDate" maxlength="10" style="display:inline;">
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-th"></span>
                    </div>
                    <span class="input-group-addon" id="sizing-addon1"><span id="spanAstreisk" class="glyphicon glyphicon-asterisk requiredAsterisk"></span></span>
                </div>
                <label for="txtEffectiveDate" generated="true" class="error">This field is required.</label>

            </td>
        </tr>
    </tbody>
</table>

Update: I noticed that you had one other asterisk without input-group-addon. If you want the asterisk without the style of an input-group-addon, then you can use a span and then apply styles that will make it act like a input-group-addon. The style declarations that you need are: display:table-cell, vertical-align-middle (these two styles make the asterisk vertically-centered) and width:1% (to make it take the least amount of space). Plus padding:6px 12px to give it the same spacing as the addons. Here is a demo:

#spanAstreisk {
  display:table-cell;
  width:1%;
  vertical-align:middle;
  padding:6px 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<table class="table table-user-information" style="font-size:12px;">
    <tbody>
        
        <tr>
            <td class="tdPopupTextDescription">Effective Date:</td>
            <td id="tdEffectiveDate">          
                <div id="divDatePickerEffectiveDate" class="input-group date" data-provide="datepicker" data-date-show-on-focus="true">
                    <input type="text" class="form-control required error" id="txtEffectiveDate" maxlength="10" style="display:inline;">
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-th"></span>
                    </div>
                    <span id="spanAstreisk" class="glyphicon glyphicon-asterisk requiredAsterisk"></span>
                </div>
                <label for="txtEffectiveDate" generated="true" class="error">This field is required.</label>

            </td>
        </tr>
    </tbody>
</table>

Here's the new code

<table>
    <tr>
        <td class="tdPopupTextDescription">Effective Date:
        </td>
        <td id="tdEffectiveDate">
            <div class="input-group date" data-provide="datepicker" data-date-show-on-focus="true">
                <input type="text" class="form-control required" id="txtEffectiveDate" maxlength="10" style="display:inline;">
                <div class="input-group-addon">
                    <span class="glyphicon glyphicon-th"></span>
                </div>
                <div class="input-group-addon">
                    <span id="test" class="glyphicon glyphicon-asterisk requiredAsterisk"></span>
                </div>
                <div class="input-group-addon spanAstreisk">
                    <span id="spanAstreisk" class="glyphicon glyphicon-asterisk requiredAsterisk"></span>
                </div>
            </div>
        </td>
    </tr>
</table>

CSS

.spanAstreisk{
    background:none;
    border:0
}

Look at this solution: jsfiddle.net/SeniorFront/z24cc91a

You just need a bit of positioning:

#spanAstreisk{
    position: absolute;
    top: 0;
}

Update:

The label you had inside of the input group is the actual problem, not the asterisk. At least not in the latest fiddle that you have.

The label changes the flow and alignment of input and the icon. You can break it out of flow with absolute positioning:

#divDatePickerEffectiveDate label{
    position: absolute; left: 0; 
    bottom: -25px;
}

https://jsfiddle.net/7512wj48/