Add diagram to div on right

I am using just diagram-js and I started from the diagram-js-examples, everything is basically the same as the example except my index.html looks like this:

    <link rel="stylesheet" href="vendor/diagram-js.css">

      #canvas > div {
          height: 100%;
          margin: 0;

      .palette-icon-lasso-tool {
        background: url('data:image/svg+xml,');

      .palette-icon-create-shape {
        background: url('data:image/svg+xml,');

      .palette-icon-create-frame {
        background: url('data:image/svg+xml,');

      .context-pad-icon-remove {
        background: url('data:image/svg+xml,') !important;

      .context-pad-icon-connect {
        background: url('data:image/svg+xml,') !important;
   <div id="banner" style="width:100%;height:30px;background-color:cornflowerblue;">
            <!--TODO -->
        <div id="parent" style="height:100%;">
            <div id="panel" style="width:300px;float:left;height:100%;background-color: lightgray;"></div>
            <div id="container" style="background-color: aqua;"></div>
    <script src="vendor/editor.js"></script>
    <script src="index.js"></script>

Everything else is the same as the example, what I get is the diagram is put under panel div when I want it to the right.

Im not too much of a css guru, but I think I need to get to mess with the diagram’s configuration to get the css right? Am I taking the wrong approach? I Imagine when I create the diagram in the javascript I need to pass something extra in the constructor to not have the css go below but to the right e.g:

const diagram = new Editor({
  container: document.querySelector('#container'),
  config: { overflow: clip }

I’d probably have to change some things about the Editor class as well maybe. Any guidance is appreciated.

Through container your can set the parent node of the modeler.