title: Display inline-block not working
body: <p>So I have html like this</p>
  
  <pre><code>    &lt;div class="search-form-wrapper"&gt;
  &lt;/div&gt;
  &lt;div class="results-view-wrapper"&gt;
  &lt;/div&gt;
  &lt;div class="quick-visualization-wrapper"/&gt;
  </code></pre>
  
  <p>This is the CSS for them -</p>
  
  <pre><code>  .search-form-wrapper {
      border-right: solid 1px #d1d2d4;
      display: inline-block;
      float: left;
      height: 100%;
      max-width: 350px;
      min-height: 900px;
      min-width: 300px;
      position: relative;
      width: 30%;
      }
  
    .results-view-wrapper {
      display: inline-block;
      height: 100%;
      position: absolute;
      padding-left: 10px;
      }
  
    .quick-visualization-wrapper {
      display: inline-block;
      }
  </code></pre>
  
  <p>The first two divs are displayed next to each other, but the last div appears behind the results-view-wrapper, (so next to the search-form-wrapper). I thought it might be because results-view-wrapper is position absolute, but when I took that out the div just moved downwards and was still behind results-view-wrapper.</p>
  
  <p>How do I make it so that it appears next to the results-view wrapper?</p>