title: How to place a div on right side of cascading tables - CSS
body: <p>I have 3 tables, cascading one after the other. I have a div, that I want to place on right side of these tables. The height of div may vary according to text inside. Currently the div is displayed below tables, like the image below;</p>
  
  <p><img src="https://i.stack.imgur.com/KkX9y.png" alt="current"></p>
  
  <pre><code>&lt;table class="class1" cellpadding="0" cellspacing="0" style="margin-top: 0px;"&gt;
    &lt;tr&gt;
      &lt;td class="cell1"&gt;Cell1&lt;/td&gt;
      &lt;td class="cell2"&gt;Cell2&lt;/td&gt;
    &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td class="cell1"&gt;Cell3&lt;/td&gt;
      &lt;td class="cell2"&gt;Cell4&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;table class="class2" cellpadding="0" cellspacing="0" style="margin-top: 0px;"&gt;
    &lt;tr&gt;
      &lt;td class="cell1"&gt;Cell5&lt;/td&gt;
      &lt;td class="cell2"&gt;Cell6&lt;/td&gt;
    &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td class="cell1"&gt;Cell7&lt;/td&gt;
      &lt;td class="cell2"&gt;Cell8&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;table class="class3" cellpadding="0" cellspacing="0" style="margin-top: 0px;"&gt;
    &lt;tr&gt;
      &lt;td class="cell1"&gt;Cell9&lt;/td&gt;
      &lt;td class="cell2"&gt;Cell10&lt;/td&gt;
    &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td class="cell1"&gt;Cell11&lt;/td&gt;
      &lt;td class="cell2"&gt;Cell12&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;div class="mydiv"&gt;mydiv&lt;/div&gt;
  </code></pre>
  
  <p>But I want to place the div next to tables, so that it can extend downwards.</p>
  
  <p>Here is the working fiddle <a href="http://jsfiddle.net/ZHVuf/1/" rel="nofollow noreferrer">http://jsfiddle.net/ZHVuf/1/</a></p>