Hey there, I'm working with an HTML file that has 3 input options. Here's a snippet:
<script type="text/ng-template" id="dashboard_assigngroup_popup.html">
<div class="modal-header modal-header2">
<h3 class="modal-title">Assign Chart Group</h3>
</div>
<div class="modal-body">
<table class="table">
{%verbatim %}
<tr>
<td>
<div class="input-group" style="padding:1%;">
<span class="input-group-addon">Chart title</span>
<select type="input" class="form-control" ng-model="final_data.info" ng-options="m.id as m.title for m in chartlist" required ng-cloak>
</select>
</div>
</td>
</tr>
<tr>
<td>
<div class="input-group" style="padding:1%;">
<span class="input-group-addon">Chart group</span>
<select type="input"class="form-control"ng-model="final_data.group"ng-options="c.id as c.name for c in chartgrouplist"required ng-cloak>
</select>
</div>
</td>
</tr>
<tr>
<td colspan="5">
<div class="input-group" style="padding:1%;">
<span class="input-group-addon">Order </span>
<input type="input" class="form-control" placeholder="Order" ng-model="final_data.orderg">
</div>
</td>
</tr>
<tr>
<td colspan="4">
<div class="modal-footer">
<button class="btn btn-success" type="button" ng-click="submit()" id="submit">Save</button>
<button class="btn btn-grey" type="button" ng-click="cancel()">Discard</button>
</div>
</table>
{% endverbatim %}
</div>
</script>
The input-group-addons are not aligned properly. I tried to use CSS to align them but was unsuccessful. Any suggestions on how to align these input-group-addons correctly? Thanks!