[S] Optimize css selectors for block-info and block-grade

src/pages/overall/overall-course/course-head/course-head.scss

@@ -11,7 +11,7 @@
     height: 50px;
 }
 
-.course-col-name
+#block-info
 {
     // Align left
     text-align: left;
@@ -32,7 +32,7 @@
     }
 }
 
-.course-col-grade
+#block-grade
 {
     // Align right
     text-align: right;

src/pages/overall/overall-course/course-head/course-head.vue

@@ -1,11 +1,11 @@
 <template>
     <div id="course-head" class="course-card-content main vertical-center"
          :class="clickable ? 'clickable' : ''" @click="redirect">
-        <div class="course-col-name">
             <div class="course-name">{{course.name}}</div>
             <div class="course-teacher">{{course.teacherName}}</div>
+        <div id="block-info">
         </div>
-        <div class="course-col-grade">
+        <div id="block-grade">
             <div class="course-grade">
                 <span class="letter">{{course.letterGrade}} </span>
                 <span class="numeric">{{course.numericGrade === undefined ? '--' : course.numericGrade.toFixed(2)}}</span>