Make each of the three columns on the GitHub Pages page individually …

…scrollable (#561)

* Ensure the result can be scrolled independently from the source

* Make columns of demo page individually scrollable

---------

Co-authored-by: codebymikey <9484406+codebymikey@users.noreply.github.com>

index.html

@@ -19,9 +19,9 @@ <h1>Diff</h1>
 
 <table>
 	<tr>
-		<td contenteditable="true" id="a">restaurant</td>
-		<td contenteditable="true" id="b">aura</td>
-		<td><pre id="result"></pre></td>
+		<td><div contenteditable="true" id="a">restaurant</div></td>
+		<td><div contenteditable="true" id="b">aura</td>
+		<td><div><pre id="result"></pre></div></td>
 	</tr>
 </table>
 

style.css

@@ -12,18 +12,21 @@ body {
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }
-html, body, table, tbody, tr, td {
+html, body, table, tbody, tr, td, td div {
 	height: 100%
 }
 table {
 	table-layout: fixed;
 	width: 100%;
 }
 td {
-	width: 33%;
+	box-sizing:border-box;
+	width: 33.3333%;
 	padding: 3px 4px;
 	border: 1px solid transparent;
-	vertical-align: top;
+}
+td div {
+	overflow: auto;
 	font: 1em monospace;
 	text-align: left;
 	white-space: pre-wrap;