Untitled

dabblet.css

.cont {
	width: 100%;
	
	overflow: hidden;
	position: relative;
	white-space: nowrap;
}

.p1, .p2 {
	padding: 20px;
	vertical-align: top;
}

.p1 {
	background: red;
	display: inline-block;
	width: 100%;
	white-space: normal;
}

.p2 {
	white-space: normal;
	display: inline-block;
	width: 100%;
	position: relative;
	transition: all 1s;
	background: blue;
	z-index: 9;
	padding-bottom: 999px;
	margin-bottom: -999px;
}
.cont:hover .p2 {
	transform: translate(-100%,0);
}

dabblet.html

<div class="cont">
	<div class="p1">content<br/>asdf<br/>asdfsfd</div	
	><div class="p2">content2</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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