Adjusting Buttons and Text Field in a Div - html

Question

I'm trying to develop a Integer Number Field. I've got it working but the styling is somewhat creating a problem. I'm using Glyphicons Plus and Minus to act as increment and decrement functionalities and input text field to display the Integer number.
I'm not able to adjust the Minus Glyphicon to the height of the div.
The working code: http://jsfiddle.net/nvarun123/fv4jxo4t/26/
HTML code:
<div>
<a>
<button (click)="decrement()" class="btn btn-primary">
<span><i class="glyphicon glyphicon-minus" ></i></span>
</button>
</a>
<input type="text" style="width:45%;" [(ngModel)]="count">
<a>
<button (click)="increment()" class="btn btn-primary" style="float: right;">
<span><i class="glyphicon glyphicon-plus" ></i></span>
</button>
</a>
</div>
CSS code:
div {
position:relative;
border: 1px solid #CACEDB;
width: 162px;
height:38px;
overflow: hidden;
white-space: nowrap;
border-radius:3px;
}
input{
text-align: center;
height:100%;
width:100%;
border:none;
}
input:focus{
outline: none;
}
button
{
-webkit-appearance: none;
outline: none;
height:100%;
border:none;
vertical-align:middle;
}
button:active {
background-color: #015191;
}

Answer 1

Your minus button needs a float:left :
<div>
<a>
<button (click)="decrement()" class="btn btn-primary" style="float: left;">
<span><i class="glyphicon glyphicon-minus" ></i></span>
</button>
</a>
<input type="text" style="width:45%;" [(ngModel)]="count">
<a>
<button (click)="increment()" class="btn btn-primary" style="float: right;">
<span><i class="glyphicon glyphicon-plus" ></i></span>
</button>
</a>
</div>

Answer 2

As you are already using Bootstrap you can make use of the input-group class alongside input-group-btn. Reference the CodePen link below:
http://codepen.io/rkieru/pen/JKOyom
<div class="input-group">
<span class="input-group-btn"><button class="btn btn-primary" type="button"><i class="fa fa-minus"></i></button></span>
<input type="text" class="form-control" placeholder="Integer">
<span class="input-group-btn"><button class="btn btn-primary" type="button"><i class="fa fa-plus"></i></button></span>
</div>
I would also recommend not wrapping your <button> in an <a> tag. The <button> can function on a JS event on its own and the code is cleaner.