don't ask

dabblet.css

/* don't ask */
.table {display:table;width:100%;background:white;height:auto;border-spacing:5px;padding:0;}
.table.table {height:50%;margin:0;}/* <= here */
.cell {display:table-cell;vertical-align:middle;border:solid;text-align:center;
background:turquoise;}
.cell .cell {min-width:50px;}
.w250 {width:250px;}
.table .table .cell:nth-child(1n) {background:white;}
.table .table .cell:nth-child(2n) {background:gold;}
.table .table .cell:nth-child(3n) {background:#ddd;}
.table .table .cell:nth-child(4n) {background:#159;}
.table .table .cell:nth-child(5n) {background:orange;}
html {background:#333;}

dabblet.html

<section class="table">
	<aside class="cell w250">
	<br/><br/><br/><br/><br/><br/><br/><br/><br/>
	 <p>I give the height <br/><br/>to the whole thing !</p>
	 <br/><br/><br/><br/><br/><br/>
	 <p>Arf, don't mess it. It  only works if ur loeki !</p>
	</aside>
	<article class="cell">
		<ul class="table">
				<li class="cell"><p>not too high here pliz ! </p></li>
				<li class="cell">Opera works the other way round</li>
				<li class="cell">Safari windows , fine!</li>
				<li class="cell"> </li>
				<li class="cell">Firefox is fine too with this CSS</li>
				<li class="cell">Chrome windows works as well</li>
		</ul>
		<ul class="table">
				<li class="cell">Idem 4 this line </p>
				<li class="cell"> </li>
				<li class="cell">No idea about IE behaviors or within other OS browser</li>
				<li class="cell">E</li>
		</ul>
	</article>
</section>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}