How to make <pre> grow with <code>?

dabblet.css

/**
 * How to make <pre> grow with <code>?
 */

html
{
	background-color: #111;
} 

article
{
	outline : orange solid thick;
	width   : 20em;
}

pre
{
	background-color : #43424F;
	color  	         : white;
	text-shadow      : rgba(255, 255, 255, .8) 0 0 0.2em;
	white-space      : normal;

}

pre code
{
	display     : block;
	white-space : pre;
}

dabblet.html

<article>
<pre><code>#include "stdio.h"</code>
<code></code>
<code>int main (int argv, char **argv) {</code>
<code>    printf("Hello world program is a computer program that outputs 'Hello, world' on a display device. Because it is typically one of the simplest programs possible in most programming languages, it is by tradition often used to illustrate to beginners the most basic syntax of a programming language, or to verify that a language or system is operating correctly.\n");</code>
<code>    return 0;</code>
<code>}</code>
</article>

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"all"}