demo/css.css
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
font: 14px Helvetica;
color: #333;
background: #f5f5f5;
padding: 0;
margin: 0;
height: 100%;
text-shadow: 0 1px 0 #eee;
}
.hide {
display: none !important;
}
#body {
width: 80%;
min-width: 900px;
margin: 40px auto;
}
h2 {
margin: 0;
padding: 10px 0;
}
.content {
position: relative;
width: 100%;
height: 400px;
}
textarea {
width: 100%;
height: 100%;
border: 1px solid #737373;
}
pre {
display: block;
position: absolute;
top: 0;
right: 0;
width: 49.8%;
height: 100%;
overflow: auto;
border: 1px solid #737373;
background: #e3fbfd;
margin: 0;
padding: 4px;
}
.content.active textarea {
width: 49.8%;
}