chore: update useful concepts positioning (#225)

* chore: update useful concepts positioning

* chore: update UI

src/components/Lesson.vue

@@ -2,19 +2,19 @@
   <div>
     <Header/>
     <div class="center mw7 ph2">
-      <div class="flex-l items-start  center mw7 ph2">
+      <div class="center mw7 ph2">
         <section class="pv3 mt3">
           <div class="lh-solid v-mid f4">
             <span class="green v-mid"><span class="b">{{workshopShortname}}</span> | Lesson {{lessonNumber}} of {{lessonsInWorkshop}}</span>
             <span class="pl1"><img v-if="lessonPassed" src="../static/images/complete.svg" alt="complete" style="height: 1.2rem;" class="v-mid"/></span>
           </div>
           <h1>{{lessonTitle}}</h1>
+          <div v-if="concepts" class='fr-l measure-narrow-l ph3 mb2 ml3-l ba border-green' style="background: rgba(105, 196, 205, 10%)">
+            <h2 class="f5 fw2 green mt0 nb1 pt3">Useful concepts</h2>
+            <div class='f6 lh-copy' v-html="parsedConcepts"></div>
+          </div>
           <div class="lesson-text lh-copy" v-html="parsedText"></div>
         </section>
-        <section v-if="concepts" class='dn db-ns ba border-green ph4 ml3 ml5-l mt5 mb3 mr3 measure' style="background: rgba(105, 196, 205, 10%)">
-          <h2 class="f5 fw2 green mt0 nb1 pt3">Useful concepts</h2>
-          <div class='f6 lh-copy' v-html="parsedConcepts"></div>
-        </section>
       </div>
       <section v-if="exercise" v-bind:class="{expand: expandExercise}" class="exercise pb4 pt3 ph3 ph4-l mb3 mr5 flex flex-column" style="background: #F6F7F9;">
         <div class="flex-none">