Add visual divider between components

public/aura-demo.css

@@ -6,12 +6,14 @@ body {
     margin: 0;
 }
 
-#common-area {
+#common-area,
+.common-divider {
     margin-bottom: 0;
     padding: 16px 32px;
     background-color: rgba(0, 0, 0, 0.88);
     color: white;
     font-family: Helvetica, sans-serif;
+    display: block;
 }
 
 #common-area img#aura-logo {
@@ -19,16 +21,19 @@ body {
     margin: 0 0 8px 0;
 }
 
-#common-area h1 {
+#common-area h1,
+.common-divider h1 {
     font-size: 16px;
     margin-bottom: 32px;
 }
 
-#common-area p {
+#common-area p,
+.common-divider p {
     max-width: 400px;
 }
 
-#common-area a:hover {
+#common-area a:hover,
+.common-divider a:hover {
 	text-decoration: underline;
 }
 
@@ -36,4 +41,5 @@ body {
 
 .component-container {
     margin: 32px;
+    width: calc(100% - 64px);
 }
\ No newline at end of file

public/episode-detail.html

@@ -31,9 +31,18 @@
       <p></p>
     </div>
 
+    <div id="episode-detail" class="component-container" style="min-height: 600px"></div>
+    <div class="common-divider">
+      <h2>Player Component</h2>
+      <p>
+        The embedded player below demonstrates how the communication with the episode
+        detail view is performed.
+      </p>
+    </div>
+    <div id="aura-player" class="component-container"></div>
+
     <aura-service-worker></aura-service-worker>
 
-    <div id="episode-detail"></div>
     <script>
       var episodeIds = (ids = [
         '2040245',
@@ -152,13 +161,7 @@
           },
         })
       })
-    </script>
 
-    <h2>Player Component</h2>
-    <hr />
-
-    <div id="aura-player" class="component-container"></div>
-    <script>
       /** Inject component into HTML **/
       document.addEventListener('DOMContentLoaded', function (event) {
         new AuraPlayer({