текстовое поле и кнопки не выравнивается

Question

Я не понимаю, почему мои кнопки и текстовое поле не совпадают.

    <div class="form-group">
  <label class="control-label col-md-3 col-sm-3 col-xs-12" for="Pic">Picture/File</label>
<div class="col-md-9 col-sm-7 col-xs-12">   
   
<div class="input-group input-file" > 
			<span class="input-group-btn">
        		<button class="btn btn-info btn-choose float-left" type="button">Choose</button>
    		</span>
    		<input type="text" class="form-control" id="Pic" placeholder='Choose a file...' />
    		<span class="input-group-btn">
       			 <button class="btn btn-danger btn-reset float-left" type="button">Reset</button>
    		</span>
		</div>
   </div>
</div>

Я хочу, чтобы мое текстовое поле и кнопки плавно выравнивались, к сожалению, это не так.Есть какой-либо способ сделать это?нижняя строка текстовых полей не совпадает с кнопкой выбора и сброса.

Answer 1

Попробуйте добавить эти строки.Может быть вам нужно override css

.input-file button, .input-file input[type="text"] {
  height: 40px; // Change as per your requirement
}

рабочая скрипка здесь