Align items on html page

Question

I have the following code:

CSS:

.apoio{
   float:left;
} 

.box{
   width:300px;
   height:100px;
   background-color:#666;
   border-radius: 10px;
   margin: 0 auto;
}

HTML:

<canvas class="apoio" id="cvs" width="500" height="200"></canvas>
<div class="box"></div>

The idea was for both of them to be on each other’s side, but...

How do I make them parallel and not that way?

EDIT 1: Inside the canvas I have a javascript:

<script>
window.onload = function ()
{
    var data = {}
        data.shipped = [<?php echo $mes_quant[$b]; ?>];
        data.sold    = [<?php echo $hoje_quant[$b]; ?>];

    var bar1 = new RGraph.Bar({
        id: 'cvs',
        data: data.shipped,
        options: {
            gutterTop: 40,
            gutterLeft: 70,
            colors: ['rgba(0,0,255,0.2)'],
            labels: ['Acessos Hoje/Mês'],
            labelsAbove: data.shipped,
            strokestyle: 'rgba(0,0,0,0)',
            scaleZerostart: true,
            textAccessible: true,
            shadow: true
        }
    }).draw();

    var bar2 = new RGraph.Bar({
        id: 'cvs',
        data: data.sold,
        options: {
            ymax: bar1.scale2.max,
            gutterTop: 40,
            gutterLeft: bar1.Get('gutterLeft'),
            colors: ['pink'],
            noaxes: true,
            labelsAbove: true,
            hmargin: 20,
            ylabels: false,
            backgroundGrid: false,
            strokestyle: 'rgba(0,0,0,0)',
            textAccessible: true,
            shadow: true
        }
    }).draw();
};
</script>

Edit 2

 <canvas class="apoio" id="cvs" width="500" height="200" style="position: absolute; left: 0px; top: 0px; display: inline; float: none;"></canvas>

Answer 1

I don’t know if this is exactly what you want, but with display:flex da to do something like this. I believe that can solve your problem.

The Gray Box will always be centered on the space left after the Red Box

body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: flex-start;
}
.apoio{
		float:left;
		background-color: red;
		width: 500px;
		height: 200px;
 } 
 .box{
		width:300px;
		height:100px;
		background-color:#666;
		border-radius: 10px;
		margin: 0 auto;
 }

<canvas class="apoio" id="cvs" ></canvas>
<div class="box"></div>

Answer 2

I see you use a plugin called Rgraph. This plugin creates a div container with id #cvs_rgraph_domtext_wrapper.

So, in your CSS, define the float: left; for that div:

#cvs_rgraph_domtext_wrapper{
   float:left;
}

Print: