How do you put text to the right or left of a canvas element?

Question

I am trying to add text to the right and left of the canvas (black grid) shown in this picture, but no matter what I try it seems to put the text above or below it.

 <div id="inputs"> <input id='slider' type="range" min=2 max=100 step=1> Rows: <span id="choice"></span> <input id='slider2' type="range" min=0 max=70 step = 0.5> Percent of nodes to be walls: <span id="choice2"></span> <input type="checkbox" id='Show Path' checked=true>Show Path <input type="button" value="Clear Board" onclick="setup();"> <a href="controls.html" style="margin-left:30px">Controls</a> </div> <br> <canvas id="canvas" width="700" height="700"></canvas>

Answer 1

Not sure how much content you would like to add on the left/right of the canvas element but I would suggest something like:

<div class="container">
    <div>Left text....</div>
    <canvas id="canvas" width="700" height="700"></canvas>
    <div>Right text....</div>
</div>

With the following CSS:

.container {display: flex; flex-direction: "row"; }

Answer 2

Just needed to add some more css to make it within a line.

EDIT:

The revised snippet can now be run, with the new inline-block-centered class applied to the canvas and surrounding text.

(The canvas border is just to make the canvas visible in the snippet.)

 /* This ruleset is just for the snippet. (IRL, reset to 700px) */ #canvas { width: 200px; height: 200px; border: 1px solid grey; } /* This crucial ruleset puts the selected elements inline together */.inline-block-centered { display: inline-block; vertical-align: middle; } /* These rulesets are optional replacements for forced formatting in HTML */ #inputs { margin-bottom: 1em; } #inputs > a { margin-left: 30px; }

 <div id="inputs"> <input id='slider' type="range" min=2 max=100 step=1> Rows: <span id="choice"></span> <input id='slider2' type="range" min=0 max=70 step = 0.5> Percent of nodes to be walls: <span id="choice2"></span> <input type="checkbox" id='Show Path' checked=true>Show Path <input type="button" value="Clear Board" onclick="setup();"> <a href="controls.html">Controls</a> </div> <div class="inline-block-centered"> <span>Left text</span> </div> <canvas id="canvas" class="inline-block-centered"></canvas> <div class="inline-block-centered"> <span>Right text</span> </div>