Align form element with divs

Question

.quantbutton {
	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;
}
#ppqty {
	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="quantbutton" onclick="downQuant();">
    < 
  </div>
  <input type="text" size="1" maxlength="1" value="1" name="qty" id="ppqty"/>
  <div class="quantbutton" onclick="upQuant();">
    >
  </div>
</div>

I have a form element for quantity, with two "buttons" on either side of the field which increment and decrement the value inside the box. Despite my best efforts, I can't seem to align it properly, there's always a vertical offset.

How do I make the form element height equal to that of the buttons, and have it aligned so the top of the form element meets the top of the "buttons" on either side?

Answer 1

You have some margin-bottom: 3px; on your divs, you have to add it to the input as well:

(vertical-align: top; instead does work as well)

.quantbutton {
	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;
}
#ppqty {
	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="quantbutton" onclick="downQuant();">
    < 
  </div>
  <input type="text" size="1" maxlength="1" value="1" name="qty" id="ppqty"/>
  <div class="quantbutton" onclick="upQuant();">
    >
  </div>
</div>

Answer 2

for #ppqty css try vertical-align: top;

like this

#ppqty{
vertical-align: top;
}