Place a button next to the input

Question

Segue jsfiddle: https://jsfiddle.net/oq0zcn94/8/

The first code is correct, but in the second code I put a button on the side and the input became smaller. Because this happens ?

I want to leave the first code equal but with a button on the right side.

See the image:

Where I took a red line, took up space and I don’t understand why.

Answer 1

Friend, the problem in your case is that the second input is inside the div with the class form-Row (<div class="form-row">) .

Just insert a div Row and creating divisions in columns as in the example:

$(function() {

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/fileinput.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/css/fileinput.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>


<div class="card-body">
  <label>Incorreto</label>
   <div class="form-row" >
  <div class="file-loading">
    <input id="input-b1" name="input-b1" type="file" class="file" data-show-preview="false">
  </div></div>
</div>


<div class="card-body">
<label>Correto</label>
  <div class="row">
    <div class="col-md-10">
      <div class="file-loading">
        <input id="input-b2" name="input-b2" type="file" class="file" data-show-preview="false">
      </div>
    
     </div>
     <div class="col-md-2">
       <button id="delete" type="button" class="btn btn-outline-danger" style="margin-left: 16px;">
      
       <div class="spinner float-right" style="width: 16px; height: 16px;"></div>  
       Apagar vídeo
       </button>
     </div>
    
  </div>
</div>