Bootstrap 3 - button in Input Group not in the same height

Issue

I use Bootstrap 3, use input group, use button and use glyphicon for the button, but strangely the buttons are not the same height, how do I make the height of the buttons the same?

My simple coding is like this:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">    
<div class='input-group'>
    <span class='input-group-addon'>Nama</span>
    <input type='text' id='enomor' class='form-control' onkeypress='return okpnons(event)'>
    <span id='enomorupdate'  class='input-group-btn'>
        <button type='button' onclick='ocenomorupdate()' class='btn btn-primary'>
            <span class='glyphicon glyphicon-floppy-disk'></span>
        </button>
    </span>
</div>

Solution

Below is the correct syntax. I've changed the input-group-btn container from a span element to a div element.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class='input-group'>
  <span class='input-group-addon'>Nama</span>
  <input type='text' id='enomor' class='form-control' onkeypress='return okpnons(event)'>
  <div class='input-group-btn'>
    <button type='button' onclick='ocenomorupdate()' class='btn btn-primary'>
      <span class='glyphicon glyphicon-floppy-disk'></span>
    </button>
  </div>
</div>

You can also adjust the height of the button manually to match the height of the bootstrap 3 input using custom CSS:

.input-group .form-control,
.input-group-btn .btn {
    height: 34px;
}
.input-group-addon,
.form-control,
.input-group-btn .btn {
    box-sizing: border-box;
}

Answered By - Jacob