how to display 2 google charts inline

I'm using google chart tools to display two piecharts one to the left and the other to the right, Before creating dynamically the div container using the DOM, it worked with bootstrap classes like this:

  {{-- Piechart 1 --}}
<div class="row form-group">
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-body">
                <div id="piechart_1" style="width:auto; "></div>
                <div id="total3"> </div>
            </div>
        </div>
    </div>
    {{-- Piechart 2 --}}
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-body">
                <div id="pie_status_1" style="width:auto; "></div>
                <div id="total4"> </div>
            </div>
        </div>
    </div>
</div>

After creating dynamically the graphics using the DOM and trying to recreate(if possible) the bootstrap classes, they are overwritten

@foreach ($escuela_data as $key => $escuela)

      //LEFT CHART
        function drawPieChart{{ $key }}() {

        var data = google.visualization.arrayToDataTable([
            ['Sede', 'Cantidad'],

            @foreach ($suma_inscritos_sede[$key] as $index => $value)

                ["{{ @$value->sede }}", {{ @$value->suma_por_sede }}],
            @endforeach

        ]);

        var options = {
            title: "{{ @$value->nom_escuela }} - Total de Inscritos por Sede ",
            is3D: false,
            height: 500,
            
            titleTextStyle: {
                color: '#1e5095', // any HTML string color ('red', '#cc00cc')
                fontName: 'Arial', // i.e. 'Times New Roman'
                fontSize: 12, // 12, 18 whatever you want (don't specify px)
                bold: true, // true or false
                italic: true // true of false
            },
        };
        
        var container = document.createElement('div');  <-- Problem here
        container.classList.add("class", "row");       <---  
        var container = document.createElement('div');  <---
        container.classList.add("class", "col-md-6");   <---
        $('.chartContainer').append(container);

        var chart = new google.visualization.PieChart(container);
        chart.draw(data, options);


    }

    google.charts.setOnLoadCallback(drawPieChart{{ $key }});
    

   //RIGHT CHART
    function drawPieChartEstado{{ $key }}() {

    var data = google.visualization.arrayToDataTable([
        ['Estado', 'Cantidad'],

        @foreach ($suma_estado_por_escuela[$key] as $index => $value)

            ["{{ @$value->cein_estado }}", {{ @$value->suma_estado_escuela }}],
        @endforeach

    ]);

    var options = {
        title: '{{ @$value->nom_escuela }} - Estados de alumnos por Escuela ',
        is3D: false,
        height: 500,
       
        titleTextStyle: {
            color: '#1e5095', // any HTML string color ('red', '#cc00cc')
            fontName: 'Arial', // i.e. 'Times New Roman'
            fontSize: 12, // 12, 18 whatever you want (don't specify px)
            bold: true, // true or false
            italic: true // true of false
        },
    };
    
    var container = document.createElement('div');
    container.setAttribute("class", "col-md-6");
    $('.chartContainer').append(container);
    
    var chart = new google.visualization.PieChart(container);
    chart.draw(data, options);
    }

 google.charts.setOnLoadCallback(drawPieChartEstado{{ $key }});

@endforeach

how could I create divs so I put both charts side by side or using bootstrap classes ?

thanks in advance!

the element you create is only put on the DOM when you call append, not when you call createElement, so you are only appending the second element you create.

let container = document.createElement('div');
container.classList.add("row");
$('.chartContainer').append(container);  

container = document.createElement('div');
container.classList.add("col-md-6");
$('.chartContainer').find(`div.row`).append(container);