title: How to put label to left of input when the HTML is fixed -- I can only change the CSS
body: <p>Using DataTables, I have no control over the generated HTML. It automatically generates:</p>
  
  <pre><code>&lt;div class="dataTables filter" id="categories_filter"&gt;
    &lt;label&gt;
      Search:
      &lt;input type="text" aria-controls="categories"&gt;
    &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>There doesn't appear to be any way to close the <code>&lt;input&gt;</code> tag or to move it outside the <code>&lt;label&gt;</code> tag.</p>
  
  <p>When I don't add any CSS, it reads the CSS that DataTables automatically includes, which puts the "Search:" above the search box, not to its left. This web page hands whenever I try to paste that automatically generated CSS in this box, but here it is <a href="https://gist.github.com/4281647" rel="nofollow">in a Gist</a>.</p>
  
  <p>Using CSS and the existing HTML, I'm now trying to make the word "Search:" appear to the left of the search box, with no luck.</p>
  
  <p>Using SCSS, my latest attempt is:</p>
  
  <pre><code>.dataTables_filter label {
    display: inline;
    float: none;
    text-align: right;
    input {
      display: inline-block;
      float: none;
    }
  }
  </code></pre>
  
  <p>Which compiles to:</p>
  
  <pre><code>.dataTables_filter label {
    display: inline;
    float: none;
    text-align: right;
  }
  
  .dataTables_filter label input {
    display: inline-block;
    float: none;
  }
  </code></pre>
  
  <p>The automatically included CSS file is:</p>