Make times right aligned

aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonInformation.vue

 <template>
   <div :class="{ 'full-width grid mr-0': true, 'mr-md-4': compact }">
     <div>
-      <time :datetime="documentation.datetimeStart" :class="{ 'd-block': compact }">
-        {{ $d(toDateTime(documentation.datetimeStart), "shortTime") }}
-      </time>
-      <span v-if="!compact">–</span>
-      <time :datetime="documentation.datetimeEnd" :class="{ 'd-block': compact }">
-        {{ $d(toDateTime(documentation.datetimeEnd), "shortTime") }}
-      </time>
+      <div :class="{ 'text-right d-flex flex-column fit-content': compact }">
+        <time :datetime="documentation.datetimeStart" class="text-no-wrap">
+          {{ $d(toDateTime(documentation.datetimeStart), "shortTime") }}
+        </time>
+        <span v-if="!compact">–</span>
+        <time :datetime="documentation.datetimeEnd" class="text-no-wrap">
+          {{ $d(toDateTime(documentation.datetimeEnd), "shortTime") }}
+        </time>
+      </div>
     </div>
     <span class="text-center">
       {{ documentation.course?.name }}
@@ -51,4 +53,8 @@ export default {
 .subject {
   justify-self: end;
 }
+
+.fit-content {
+  width: fit-content;
+}
 </style>