bootstrap input field and input-addon not on the same line

Does anybody can explain me why input-group-addon stay above input field?

HTML

   <div class="container">
  <div class="row">
    <div class="center">
      <form class="form-horizontal" id="formLogin">
        <div class="form-group">
          <span class="input-group-addon"><i class="fa fa-at"></i></span>
          <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
        <div class="form-group">
          <span class="input-group-addon"><i class="fa fa-lock"></i></span>
          <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
        <div class="form-group">
          <input type="submit" class="btn btn-primary btn-block" value="Login">
          <a href="#" class="btn btn-default btn-block" id="linkRegister">SignUp</a>
        </div>
    </div>
  </div>
  </form>

CSS

.center {
    width: 50%;
    height: 50%;
    margin: auto;
    min-width: 225px;
    max-width: 275px;
    position: relative;
    top: 180px;
}

Example http://ift.tt/1GToMnI

Thanks.