iframe.html

<!doctype html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container grid">
	<form>
		<h2>HTML</h2>
		<textarea id="html"></textarea>

		<h2>CSS</h2>
		<textarea id="css"></textarea>
	</form>
</div>

<div class="output grid">
	<iframe></iframe>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<script src="http://localhost:35729/livereload.js"></script>

<script>
(function() {
	$('.grid').height( $(window).height() );	

	var	contents = $('iframe').contents(),
		body = contents.find('body'),
		styleTag = $('<style></style>').appendTo(contents.find('head'));

	$('textarea').keyup(function() {
		var $this = $(this);
		if ( $this.attr('id') === 'html') {
			body.html( $this.val() );
		} else {
			// it had to be css
			styleTag.text( $this.val() );
		}
	});

})();

</script>

</body>
</html>