Move message above both editor planels.

Author: BigBlueHat

playground/next/index.html

@@ -109,20 +109,20 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
       </table>
     </div>
   </div>
+  <div class="ui icon message" v-if="message.text" :class="message.type">
+    <i class="icon" :class="{
+      'info circle': message.type == 'info',
+      'check circle': message.type == 'success',
+      'times circle': message.type == 'error',
+      'exclamation triangle': message.type == 'warning'
+    }"></i>
+    <div class="content">
+      <div class="header" v-text="message.text"></div>
+    </div>
+  </div>
   <!-- main editor area -->
   <div class="ui one column wide compact grid container" :class="[editorColumns]">
     <div class="column" :class="{ 'sixteen wide':  editorColumns == '' }">
-      <div class="ui icon message" v-if="message.text" :class="message.type">
-        <i class="icon" :class="{
-          'info circle': message.type == 'info',
-          'check circle': message.type == 'success',
-          'times circle': message.type == 'error',
-          'exclamation triangle': message.type == 'warning'
-        }"></i>
-        <div class="content">
-          <div class="header" v-text="message.text"></div>
-        </div>
-      </div>
       <div class="ui top attached tabular menu">
         <div :class="{ active: inputTab == 'json-ld' }" class="item" @click="inputTab = 'json-ld'"><i class="pencil alternate icon"></i> JSON-LD Input</div>
         <div :class="{ active: inputTab == 'options' }" class="item" @click="inputTab = 'options'"><i class="wrench icon"></i> Options</div>