Stack lesson times in compact mode like in the mockup

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

 <template>
-  <v-card-text class="d-flex align-center flex-wrap">
-    {{ $d(toDateTime(documentation.datetimeStart), "shortTime") }} –
-    {{ $d(toDateTime(documentation.datetimeEnd), "shortTime") }}
+  <v-card-text class="d-flex align-center flex-wrap gap">
+    <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>
     {{ documentation.course?.name }}
     <subject-chip
       v-if="documentation.subject"
@@ -30,3 +37,9 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.gap {
+  gap: 1em;
+}
+</style>