How can you layout "div"s created in p5js?

The html page has the following division struction:

<div id = "p5" class = "p5"></div>
<div id = "p5-left" class = "p5-left"></div>
<div id = "p5-right" class = "p5-right"></div>
<div id = "p5-center" class = "p5-center"></div>

The styles are declared as follows:

    .p5 {background-color: pink}
    .p5-left {float: left; margin-right: 30px; background-color: blue}
    .p5-center {margin-left: auto;  margin-right: auto; background-color: red; text-align:center; width: 200px}
    .p5-right{float: right; margin-left: 30px; background-color:green}

Observe:

In order to put the various components in the specified division, use code like the following:

  canvas = createCanvas(140, 120); 
  canvas.parent('p5-left');
  let btnRight = createButton('Button in "p5-right"');
  btnRight.parent("p5-right");

(The p5 code was written into this page instead of a separate file. This technique is not normally recommended.)

See also "http://brinkje.com/p5js/HowTo/HowTo/HowToArrangeRowsHTMLComponents.html

For alternative ways to position the canvas, see
https://github.com/processing/p5.js/wiki/Positioning-your-canvas

James Brink,     2/10/2020