title: Reduce upload button size in CSS
body: <p>I created a button to upload a file with an icon in order to mask the input text box and have just one button. The problem is that my button takes all the width of the div. I would like the two button are side by side. But, when I modify the .btn-file, the select dialog is broken and so, It doesn't appears.
  This is the div :</p>
  
  <pre><code>&lt;div id="mydiv"&gt;
    A text &lt;br&gt;
    An other text
    &lt;form id="test"&gt;
      &lt;span class="btn btn-block btn-file"&gt;
        &lt;i class="glyphicon glyphicon-export"&gt;&lt;/i&gt;
        &lt;input type="file" name="file" id="exampleInputFile" file-model="customer.file" on-file-change="Submit"&gt;
      &lt;/span&gt;
    &lt;/form&gt;
    &lt;span class="glyphicon glyphicon-envelope"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This it the CSS :</p>
  
  <pre><code>.btn-file {
    position: relative;
    overflow: hidden;
  }
  
  .btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 100px;
    text-align: left;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    cursor: inherit;
    display: block;
  }
  </code></pre>
  
  <p>Can you help me to align the two buttons and reduce the size of the upload button ? Thanks.</p>