title: Overlap divs within a div
body: <p>This might be quite easy but I'm having problems getting this to work the way I need.</p>
  
  <p>I'm using bootstrap and below is my css and div structure. I'm having 3 divs hidden and 3 buttons to make them visible. My problem is how do I make the divs be in the same level? At the moment the 3 divs are one below the other.</p>
  
  <p>For Better understanding I've created a <a href="https://jsfiddle.net/6Lf9spha/" rel="nofollow">Fiddle</a>.</p>
  
  <pre><code>&lt;div class="row"&gt;
     &lt;div class="col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 wrapper"&gt;
       &lt;div class="groupHolder"&gt;
            &lt;div id="xx" class="overlapDiv" Style="background-color:#F00;"&gt;Fruits&lt;/div&gt; // need these overlaping
            &lt;div id="yy" class="overlapDiv" Style="background-color:#888;"&gt;Flowers&lt;/div&gt; // need these overlaping
            &lt;div id="zz" class="overlapDiv" Style="background-color:#f60;"&gt;Veggies&lt;/div&gt; // need these overlaping
       &lt;/div&gt;
      &lt;div class="buttonHolder"&gt;
          &lt;button type="button" id="aa" class="standardBtn"&gt;Btn 1&lt;/button&gt;
          &lt;button type="button" id="bb" class="standardBtn"&gt;Btn 2&lt;/button&gt;
          &lt;button type="button" id="cc" class="standardBtn"&gt;Btn 3&lt;/button&gt;
       &lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>