responsive fix input-group with Select2 and other form-control element or input-group-btn

Question

I'm trying to finish the design, for a file upload system: the System has an Initial Select2; then it is concatenated with a search button (to search for the file); then we have an input text where I show the file name; after this I need 3 buttons: one preview, another that allows me to add more lines and another that allows me to remove them.

but I can not make it look like col-sm-12 as in col-sm-6

$(".select2").select2({
		theme: "bootstrap",
		placeholder: "Buscar y Selecionar",
		allowClear: true,
	});

.btn-file {
  overflow: hidden;
}

.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100px;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  background: red;
  cursor: inherit;
  display: block;
}

.btn-file input[readonly] {
  background-color: white !important;
  cursor: text !important;
}

.obj-file {
  width: 98% !important;
  height: 100% !important;
  min-height: calc(100vh - 200px) !important;
  overflow: auto !important;
}

.text-file {
  float: right !important;
  width: 60% !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.9/select2-bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<div class="form-group">
<div class="col-sm-6">
  <div class="input-group select2-bootstrap-append">
    <div class="input-group-btn">
      <select class="form-control select2">
        <option>Selec.</option>
        <option>Prueba 2 max with</option>
        <option>Prueba 3</option>
        <option>Prueba 4</option>
        <option>Prueba 5</option>
      </select>
      <span class="btn btn-primary btn-file">Buscar <i class="fas fa-file-alt"></i><input id="i_file_1" type="file" name="i_file_1" accept="application/pdf, image/jpeg, image/jpg, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" required></span>
    </div>
    <input type="text" class="form-control text-file" name="text_file_1" readonly>
    <div class="input-group-btn">
      <span class="btn btn-info btn-disabled view-doc btn-view " data-toggle="modal" data-target="#modal-info-i_file_1" disabled>Vista Previa</span>
      <span class="btn btn-info"><i class="fas fa-plus-square"></i></span>
      <span class="btn btn-info"><i class="fas fa-minus-square"></i></span>

    </div>
  </div>
</div>
</div>

Check the input text read only on mid; this has 80% with but i need it fill in all instance the space in line on mid.

Solution

This css fix my select2 from overflow text when select are inside a input-group:

.select2-container {
position:absolute;
}