title: responsive fix input-group with Select2 and other form-control element or input-group-btn
body: <p>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.</p>
  
  <p>but I can not make it look like col-sm-12 as in col-sm-6</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".select2").select2({
    theme: "bootstrap",
    placeholder: "Buscar y Selecionar",
    allowClear: true,
   });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" /&gt;
  &lt;link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" /&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" /&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.9/select2-bootstrap.css" rel="stylesheet" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"&gt;&lt;/script&gt;
  &lt;div class="form-group"&gt;
  &lt;div class="col-sm-6"&gt;
    &lt;div class="input-group select2-bootstrap-append"&gt;
      &lt;div class="input-group-btn"&gt;
        &lt;select class="form-control select2"&gt;
          &lt;option&gt;Selec.&lt;/option&gt;
          &lt;option&gt;Prueba 2 max with&lt;/option&gt;
          &lt;option&gt;Prueba 3&lt;/option&gt;
          &lt;option&gt;Prueba 4&lt;/option&gt;
          &lt;option&gt;Prueba 5&lt;/option&gt;
        &lt;/select&gt;
        &lt;span class="btn btn-primary btn-file"&gt;Buscar &lt;i class="fas fa-file-alt"&gt;&lt;/i&gt;&lt;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&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;input type="text" class="form-control text-file" name="text_file_1" readonly&gt;
      &lt;div class="input-group-btn"&gt;
        &lt;span class="btn btn-info btn-disabled view-doc btn-view " data-toggle="modal" data-target="#modal-info-i_file_1" disabled&gt;Vista Previa&lt;/span&gt;
        &lt;span class="btn btn-info"&gt;&lt;i class="fas fa-plus-square"&gt;&lt;/i&gt;&lt;/span&gt;
        &lt;span class="btn btn-info"&gt;&lt;i class="fas fa-minus-square"&gt;&lt;/i&gt;&lt;/span&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>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.</strong></p>