Issues with display:none

[MarcinAman]

Hi,
in some cases i'd like to hide a sample using display: none. My issue is that when i show it, it doesn't look the way it should. Example:

The sample is there because when i don't use display: none it renders correctly:

Here is a sample project that i created to show the issue. I'm using chrome version 83.0.4103.116 (Official Build) (64-bit) and my operating system is Mac Os Catalina version 10.15.5.
samples.zip

[AlexanderPrendota]

Hey, did u try to set the display: none for class executable-fragment-wrapper? It works for my side.

[MarcinAman]

It doesn't work if i do it like:

.sample > *:not([data-active]) .executable-fragment-wrapper {
    display: none;
}

But it does work when i do the same thing that is in kotlin example:

  <button onclick="KotlinPlayground('.runnablesample',{ onChange: (code)=> {console.log(code)}}); this.disabled = true; document.getElementById('wrapper').style.display = 'block';">Change display of wrapper</button>

#wrapper {
    display: none;
}

So basically the only difference that i can see is initialisation time.
Then i've tried yet another test: i went back to my original sample and remove the styles. Then opened the page and added the same styles manually. As it turns out, it work.
Imho the issue is related to the initial styles that the playground is initialised with.