Follow jsfiddle: link
The first code is correct, but in the second code I put a button on the side and the input got smaller. Why does this happen?
I want to leave the same code equal but with a right-hand button.
See the image:
Where I made a red risk, took up space and I do not understand why.
Just insert a row div and create divisions into columns as in the example:
$(function() {
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="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><scriptsrc="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>