Untitled

dabblet.css

body {
	background-color: #fff;
	color: #333;
	font-family: Tahoma, sans-serif;
}

.absolute {
    position: absolute;
}

.top {
	top: 0;
}

.left {
	left: 0;
}

.right {
    right: 0;
}

.bottom {
    bottom: 0;
}

.yellow {
    background-color: yellow;
}

.sidebar {
	box-shadow: none;
	width: 30px;
	opacity: 0.9;
	z-index: 1;
	transition: width 1s 200ms;
}

.sidebar:hover {
	width: 200px;
	box-shadow: -2px 2px 2px #ccc;
}

.content {
	border: 3px solid orange;
	margin-right: 36px;
}

dabblet.html

<div class="sidebar yellow absolute top bottom right">
</div>
<div class="content">
<p>
Blah blah blah blah blah. Le blah. Oh blah. Blah blah blah blah.
Etc. And so on and so on. And so it goes. Blah blah blah. Etc.
</p>

<p>
Blah blah blah blah blah. Le blah. Oh blah. Blah blah blah blah.
Etc. And so on and so on. And so it goes. Blah blah blah. Etc.
</p>

<p>
Blah blah blah blah blah. Le blah. Oh blah. Blah blah blah blah.
Etc. And so on and so on. And so it goes. Blah blah blah. Etc.
</p>

<p>
Blah blah blah blah blah. Le blah. Oh blah. Blah blah blah blah.
Etc. And so on and so on. And so it goes. Blah blah blah. Etc.
</p>

<p>
Blah blah blah blah blah. Le blah. Oh blah. Blah blah blah blah.
Etc. And so on and so on. And so it goes. Blah blah blah. Etc.
</p>
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}