html css + js如何并排放置两个图表（Chart_js）而不是一个在另一个下方

$(function() {
  let ctx = document.getElementById("layanan").getContext('2d');
  let data = {
    datasets: [{
      data: {
        {
          data | safe
        }
      },
      backgroundColor: ['#696969', '#808080', '#A9A9A9', '#C0C0C0', '#D3D3D3', 'lightgreen', 'lightblue', 'red'],
    }],
    labels: {
      {
        labels | safe
      }
    }
  };
  let myDoughnutChart = new Chart(ctx, {
    type: 'pie',
    data: data,
    options: {
      responsive: false,
      maintainAspectRatio: false,
      legend: {
        position: 'bottom',
        labels: {
          boxWidth: 12
        }
      }
    }
  });

  let ctx_2 = document.getElementById("layanan_subbagian").getContext('2d');
  let data_2 = {
    datasets: [{
      data: {
        {
          data | safe
        }
      },
      backgroundColor: ['#696969', '#808080', '#A9A9A9', '#C0C0C0', '#D3D3D3', 'lightgreen', 'lightblue', 'red'],
    }],
    labels: {
      {
        labels | safe
      }
    }
  };
  let myDoughnutChart_2 = new Chart(ctx_2, {
    type: 'bar',
    data: data_2,
    options: {
      responsive: false,
      maintainAspectRatio: false,
      legend: {
        position: 'bottom',
        labels: {
          boxWidth: 12
        }
      }
    }
  });
});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>

<div class="container">
  <div class="row">
    <div class="col-6">
      <canvas id="layanan" width="340px" height="340px"></canvas>
    </div>
    <div class="col">
      <canvas id="layanan_subbagian" width="240px" height="240px"></canvas>
    </div>
  </div>
</div>