<div id="chartdiv"></div>

<div class="row" style="padding-top: 15px;">
        <div class="col">
            <div class="card shadow mb-4" style= "width: 65%;
    top: -187%;">
                <div class="card-header py-3">
                    <h6 class="text-primary font-weight-bold m-0">Placement GEO Breakdown</h6>
                </div>
                <div class="card-body geoBreakdown">
                    <h4 class="small font-weight-bold">US<span class="float-right">5,908,255</span></h4>
                    Income: <div class="progress mb-4">
                        <div class="progress-bar bg-success" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60%</span></div>
                    </div>

                    <span class="col-sm-3">Some inline element</span>
                    <div class="progress mb-4">
                        <div class="progress-bar bg-danger" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60%</span></div>
                    </div>

                    <h4 class="small font-weight-bold">RU<span class="float-right">1,568,225</span></h4>
                    <div class="progress mb-4">
                        <div class="progress-bar bg-success" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60%</span></div>
                        <div class="progress-bar bg-danger" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60%</span></div>
                    </div>
                    <h4 class="small font-weight-bold">DE<span class="float-right">785,558</span></h4>
                    <div class="progress mb-4">
                        <div class="progress-bar bg-success" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60%</span></div>
                        <div class="progress-bar bg-danger" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60%</span></div>
                    </div>
                    <h4 class="small font-weight-bold">NO<span class="float-right">568,555</span></h4>
                    <div class="progress mb-4">
                        <div class="progress-bar bg-success" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60%</span></div>
                        <div class="progress-bar bg-danger" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60%</span></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
        <div class="card shadow mb-4" style= "width: 65%;
    top: -187%;     left: -25%;">
                <div class="card-header py-3">
                    <h6 class="text-primary font-weight-bold m-0">Placement Devices Breakdown</h6>
                </div>
                <div class="card-body">
                    <h4 class="small font-weight-bold">Desktop<span class="float-right">5,908,255</span></h4>
                    <div class="progress mb-4">
                        <div class="progress-bar bg-success" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60%</span></div>
                        <div class="progress-bar bg-danger" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60%</span></div>
                    </div>
                    <h4 class="small font-weight-bold">Mobile<span class="float-right">1,568,225</span></h4>
                    <div class="progress mb-4">
                        <div class="progress-bar bg-success" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60%</span></div>
                        <div class="progress-bar bg-danger" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60%</span></div>
                    </div>
                    <h4 class="small font-weight-bold">Tablets<span class="float-right">785,558</span></h4>
                    <div class="progress mb-4">
                        <div class="progress-bar bg-success" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60%</span></div>
                        <div class="progress-bar bg-danger" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60%</span></div>
                    </div>
                    <h4 class="small font-weight-bold">Unknown<span class="float-right">568,555</span></h4>
                    <div class="progress mb-4">
                        <div class="progress-bar bg-success" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60%</span></div>
                        <div class="progress-bar bg-danger" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60%</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>