Grid with differing row heights

After building three charts, I'd like to display them in a grid pattern. The grid would be chart 1 in the left column, and charts 2 and 3 in the right column. I'd like charts 2 and 3 to each be half the size as chart 1, so that they all appear in the same row. Is there a way to ensure restrict row heights within a grid to handle my chart sizing? Here is the code I'm using, but the results are chart 1 and 2 appear to be in the same row and chart 3 appears to be in a new row, under chart 2:

<div class = "row g-3">
            <div class="col-md-6">
                <div class="p-0">
                    <div id='chart1' class="chart"></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="pb-3">
                   <div id='chart2' class="chart"></div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div id='chart3' class="chart"></div>
                    </div>
                </div>
            </div>
        </div>