Searching a way to place code and runner result side by side

[jesustorresdev]

Hi,

Is there some way to place code and runner result side by side?
I'm teaching Three.js and React Three Filter, so I've prepared a slide like this:

but I would prefer to place the result at the left or right of the code. Like in this example in Threejs where I used the two-cols layout:

Do you know if it is possible, maybe with some Monaco Editor option?
Cheers!

[jesustorresdev]

For now, I've solved it creating some styles:

.monaco-horizontal-right {
  .slidev-monaco-container {
    display: flex !important;
    flex-direction: row !important;
  }
}

.monaco-horizontal-left {
  .slidev-monaco-container {
    display: flex !important;
    flex-direction: row-reverse !important;
  }
}

.monaco-horizontal-right, .monaco-horizontal-left {
  .slidev-monaco-container {
    div:has(.slidev-runner-output) {
      border-top: 0 !important;
    }
  }

  .slidev-monaco-container-inner {
    flex: 1;
    min-width: 0;
  }
}