title: Dividing my page in 2 vertical columns HTML
body: <p>I am designing a web-page where I need to divide the width of page in 2 vertical parts. In first half I want to show a pie-chart and second part I want to show a table.</p>
  
  <p>I have tried below code </p>
  
  <pre><code>&lt;div id="canvasSec" class="c1 col-xs-6"&gt;
    &lt;div id="div1" class="details col-xs-6"&gt;
      &lt;canvas id="can1" (click)="getDetails(chart)"&gt;{{chart}}&lt;/canvas&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="col-xs-6"&gt;
  
    &lt;table class="table"&gt;
      &lt;th&gt;Header&lt;/th&gt;
      &lt;tr&gt;
        &lt;th&gt; Header 1&lt;/th&gt;
        &lt;th&gt; Header 2&lt;/th&gt;
        &lt;th&gt; Header 3&lt;/th&gt;
        &lt;th&gt; Header 4&lt;/th&gt;
        &lt;th&gt; Header 5&lt;/th&gt;
        &lt;th&gt; Header 6&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When there are few number of columns in table it works fine but when number of in table increases the table is rendered below the chart.</p>
  
  <p>How can I solve this? </p>