title: Two divs side by side with one div absolute
body: <p>So I have this html </p>
  
  <pre><code>&lt;div class="app-wrapper"&gt;
    &lt;div class="search-form"/&gt;
    &lt;div class="results"&gt;
       &lt;div class="tabs"/&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>search-form has absolute positioning and is floated left. I want tabs to appear next to it, but at the top of the page. Note it doesn't have to be that tabs is always on the screen(fixed is not required). </p>
  
  <p>Right now I have</p>
  
  <pre><code>.search-form {
    position: absolute;
    width: 30%;
    min-width: 200px;
    max-width: 350px;
    height: 100%;
    min-height: 600px;
    float: left;
  }
  
  .tabs {
    position: fixed;
    border-bottom: 1px solid @section-border;
    width: 70%;
    height: 3.0em;
    float: right;
    left: 31%;
    background: @tabs-background;
  }
  </code></pre>
  
  <p>But this doesn't work because on larger screens the distance between tabs and the search-form expands. </p>
  
  <p>How do I get it so tabs is next to search-form, fills up the rest of the page, and that the distance between tabs and search-form does not depend on screen size?</p>
  
  <p>So I just realized that tabs is inside of another div, with CSS</p>
  
  <pre><code>.results {
    width: 70%;
  }
  </code></pre>