I seem to be encountering an issue highlighted in the image below:
My goal is to have the state dropdown perfectly aligned with the top and bottom edges of the other two controls. Here's the code snippet I've used to create this section of the interface:
<div class="form-group">
<label for="txtShipToCity" class="small-text-label"><strong>City St Zip:</strong></label><br />
<asp:TextBox ID="txtShipToCity" runat="server" CssClass="form-control-inline input-sm width-100 form-fixer"></asp:TextBox>
<asp:DropDownList id="ddlShipToState" runat="server" Font-Size="small" CssClass="form-control-inline input-sm width-50 form-fixer" Height="24px" ></asp:DropDownList>
<asp:TextBox ID="txtShipToZip" runat="server" CssClass="form-control-inline input-sm width-50 form-fixer" maxlength="5" ></asp:TextBox>
</div>
The relevant CSS styles are as follows:
input.form-fixer{
padding: 1px !important;
font-size: x-small !important;
height: 24px !important;
}
.width-50 {
width: 50px !important;
}
All other CSS classes used are standard Bootstrap 3 styles.
How can I achieve the desired alignment in this scenario?