Разделение моей страницы на 2 вертикальных столбца HTML

Question

Я разрабатываю веб-страницу, где мне нужно разделить ширину страницы на 2 вертикальные части.В первой половине я хочу показать круговую диаграмму, а во второй части я хочу показать таблицу.

Я пробовал ниже код

<div id="canvasSec" class="c1 col-xs-6">
  <div id="div1" class="details col-xs-6">
    <canvas id="can1" (click)="getDetails(chart)">{{chart}}</canvas>
  </div>
</div>

<div class="col-xs-6">

  <table class="table">
    <th>Header</th>
    <tr>
      <th> Header 1</th>
      <th> Header 2</th>
      <th> Header 3</th>
      <th> Header 4</th>
      <th> Header 5</th>
      <th> Header 6</th>
    </tr>
  </table>
</div>

Когда в таблице мало столбцовэто работает нормально, но когда число в таблице увеличивается, таблица отображается ниже графика.

Answer 1

Относительно простым методом было бы просто использовать свой собственный контейнер сетки, вместо того, чтобы пытаться заставить загрузчик работать на него.Я говорю это, потому что ваш ответ не требовал, чтобы это был начальный загрузчик, и это проще для меня и позволяет вам легче добавлять свои собственные настройки.

CSS

.grid-container {
  display: grid;
  grid-template-columns: 50% 50%;
}

HTML

<div class="grid-container">
  <div >
    <div id="canvasSec">
      <div id="div1">
        <canvas id="can1" (click)="getDetails(chart)"></canvas>
      </div>
    </div>
  </div>
  <div >
    <table>
        <th>Header</th>
        <tr>
          <th> Header 1</th>
          <th> Header 2</th>
          <th> Header 3</th>
          <th> Header 4</th>
          <th> Header 5</th>
          <th> Header 6</th>
          <th> Header 7</th>
        </tr>
      </table>
  </div>
</div>

Codepen: https://codepen.io/bigLuke09/pen/vVEpao