Не могу поместить кнопку перед текстовым полем в начальной загрузке

Question

Я редактирую код и хочу поместить горизонтальную кнопку в текстовое поле.

<div class="input-group">
    <label for="fname">First Name</label>
    <input type="text" class="form-control" id="fname" name="fname" placeholder="First Name" autocomplete="off">
    <span class="input-group-btn">
        <button class='btn btn-success' type="button" onclick="myFunction('fname')"><i class="fa fa-microphone"></i></button>
    </span>
</div>

Но я получаю кнопку чуть выше, примерно так

Answer 1

<label for="fname">First Name</label>
<div class="input-group">
  <span class="input-group-btn">
   <button class='btn btn-success' type="button" onclick="myFunction('fname')">test</button>
  </span>
  <input type="text" class="form-control" id="fname" name="fname" placeholder="First Name" autocomplete="off">
</div>

Answer 2

просто вывести label:

<label for="fname">First Name</label>
<div class="input-group">
    <input type="text" class="form-control" id="fname" name="fname" placeholder="First Name" autocomplete="off" >
    <span class="input-group-btn">
        <button class ='btn btn-success' type="button" onclick="myFunction('fname')"><i class="fa fa-microphone"></i></button>
    </span>
</div>

Answer 3

Вы можете просто переместить кнопку перед текстовым полем и после метки

<div class="input-group">
        <span class="input-group-btn">
          <label for="fname">First Name</label>
          <button class ='btn btn-success' type="button" onclick="myFunction('fname')"><i class="fa fa-microphone"></i></button>
        </span>
        <input type="text" class="form-control" id="fname" name="fname" placeholder="First Name" autocomplete="off" >
      </div>

Рабочий пример можно посмотреть здесь: http://jsfiddle.net/aq9Laaew/280547/