.quantity-button {
height: 35px;
width: 35px;
padding-bottom: 1px;
margin-bottom: 3px;
font-weight: 600;
font-family: Raleway;
color: white;
background-color: #AA95B9;
border: 2px solid black;
border-radius: 5px;
cursor: pointer;
display: -webkit-flex;
display: inline-flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
box-sizing: border-box;
vertical-align: middle;
}
#quantity {
text-align: center;
border: 1px solid black;
border-radius: 5px;
background-color: #C0B9C7;
height: 35px;
font-weight: 700;
vertical-align: middle;
box-sizing: border-box;
}<div id="qtyWrap">
<div class="quantity-button" onclick="decreaseQuantity();">
<
</div>
<input type="text" size="1" maxlength="1" value="1" name="quantity" id="quantity"/>
<div class="quantity-button" onclick="increaseQuantity();">
>
</div>
</div>There is a form field for quantity with two buttons that increment and decrement the value in the box. Despite attempts, I cannot get the alignment right, resulting in a vertical offset.
How can I ensure that the form element's height matches the buttons and align it so the top of the form element lines up with the top of the buttons?