bootstrap input group alignment issue

Question

Создание группы ввода в бутстрапе 4, но одна из кнопок, похоже, находится вне выравнивания.

вот мой код

<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> 

Вот мой fiddle

оценить некоторую помощь

Answer 1

Для достижения ожидается использование результата ниже

.btn{ 
    vertical-align:top 
} 

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