himedlooff/inline-style-editor.html

## inline-style-editor.html
<html>
<head style="display: block; width: 50%; height: 100%; float: left;">
    <meta charset="UTF-8">
    <title>Live CSS</title>
    <style>
        * {
            box-sizing: border-box;
        }

        #style {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            padding: 32px;
            background: #fafafa;
            font-family: monospace;
            font-size: 32px;
        }

        #style:focus {
            outline: 0;
        }

        #body {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50%;
            height: 100%;
            padding: 16px;
            margin: 0;
            float: left;
        }

        .box {
            position: relative;
            width: 85%;
            height: 85%;
            margin: 0 auto;
            border-radius: 6px;
            box-shadow: 0 0 6px #999;
        }

        .box:before {
            content: ".box";
            position: absolute;
            top: -35px;
            display: inline-block;
            font-family: monospace;
            font-size: 20px;
        }
    </style>
    <style id="style" contenteditable="true">
        .box { ... }
    </style>
</head>
<body id="body">
    <div class="box"></div>
</body>
</html>
	<html>
	<head style="display: block; width: 50%; height: 100%; float: left;">
	<meta charset="UTF-8">
	<title>Live CSS</title>
	<style>
	* {
	box-sizing: border-box;
	}

	#style {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 32px;
	background: #fafafa;
	font-family: monospace;
	font-size: 32px;
	}

	#style:focus {
	outline: 0;
	}

	#body {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50%;
	height: 100%;
	padding: 16px;
	margin: 0;
	float: left;
	}

	.box {
	position: relative;
	width: 85%;
	height: 85%;
	margin: 0 auto;
	border-radius: 6px;
	box-shadow: 0 0 6px #999;
	}

	.box:before {
	content: ".box";
	position: absolute;
	top: -35px;
	display: inline-block;
	font-family: monospace;
	font-size: 20px;
	}
	</style>
	<style id="style" contenteditable="true">
	.box { ... }
	</style>
	</head>
	<body id="body">
	<div class="box"></div>
	</body>
	</html>