revising markup and styling for listing header on LMS course dashboard

lms/static/sass/multicourse/_dashboard.scss

@@ -308,6 +308,28 @@
       margin-bottom: 30px;
     }
 
+    // my courses title
+    .my-courses-title {
+      @include clearfix();
+    }
+
+    .my-courses-title-label {
+      display: inline-block;
+      vertical-align: middle;
+      width: flex-grid(6, 9);
+    }
+
+    .my-courses-title-description {
+      @extend %t-title7;
+      display: inline-block;
+      vertical-align: middle;
+      width: flex-grid(3, 9);
+      text-transform: lowercase;
+      text-align: right;
+      letter-spacing: 0;
+      color: $lighter-base-font-color;
+    }
+
     .empty-dashboard-message {
       padding: 60px 0px;
       text-align: center;

lms/templates/dashboard.html

@@ -291,7 +291,10 @@
 
   <section class="my-courses" id="my-courses">
     <header>
-      <div style="display:flex"><h2>${_("Courses")} </h2><div style="flex-grow:1"></div><div style="font-size: 13px; color: #646464;">${_("ordered by recent activity")}</div></div>
+      <h2 class="my-courses-title">
+        <span class="my-courses-title-label">${_("Courses")}</span>
+        <span class="my-courses-title-description">${_("ordered by recent activity")}</span>
+      </h2>
     </header>
 
     % if len(course_enrollment_pairs) > 0: