bootstrap input group alignment issue

Question

Creating a input group in bootstrap 4 but one of the buttons seems to be out of alignment.

here is my code

  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="upload file...">
      <span class="input-group-btn">
        <label class="btn btn-secondary">browse<input name="derfile" type="file" style="display: none;"></label>
        <button class="btn btn-primary" type="submit">Submit</button>
      </span>
    </div>
  </div>

Here is my fiddle

appreciate some assistance

Answer 1

To achieve expected result use below

.btn{
  vertical-align:top
}

https://jsfiddle.net/Nagasai_Aytha/0j0gmbjn/3/