[O] Use css to produce new-line effect instead of <br>

src/pages/overall/overall.scss

@@ -12,18 +12,23 @@
     flex-direction: column;
 }
 
-.span-gpa-header
+.gpa
+{
+    display: block;
+}
+
+.gpa.header
 {
     font-size: 14px;
 }
 
-.span-gpa
+.gpa.text
 {
     font-size: 35px;
     font-family: 'Avenir', Helvetica, Arial, sans-serif;
 }
 
-.gpa-time
+.gpa.time
 {
     font-size: 14px;
 }

src/pages/overall/overall.vue

@@ -4,14 +4,12 @@
             <el-col :span="4">
                 <el-card style="margin-left: 20px">
                     <div style="padding: 14px;">
-                        <span class="span-gpa-header">GPA:</span>
+                        <span class="gpa header">GPA:</span>
-                        <br>
+                        <span class="gpa text">{{getGPA().gpa}}</span>
-                        <span class="span-gpa">{{getGPA().gpa}}</span>
+                        <span class="gpa max">(Out of {{getGPA().max}})</span>
-                        <span class="span-gpa">(Out of {{getGPA().max}})</span>
+                        <div class="bottom clearfix gpa time">
-                        <div class="bottom clearfix gpa-time">
+                            <time>{{ new Date().toDateString() }}</time>
-                            <time class="time">{{ new Date().toDateString() }}</time>
+                            <el-button type="text" class="gpa button">Button</el-button>
-                            <br>
-                            <el-button type="text" class="button">Button</el-button>
                         </div>
                     </div>
                 </el-card>