Fix event setting styles

components/EventSetting.module.css

@@ -1,9 +1,18 @@
+.container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.separator {
+  padding: 0 calc(8rem / 16);
+}
+
 @media only screen and (max-width: calc(768rem / 16)) {
+  .container {
+    flex-direction: column;
+  }
+
   .separator {
     display: none;
   }
-
-  .setting {
-    display: block;
-  }
 }

components/EventSetting.tsx

@@ -23,12 +23,10 @@ export function EventSetting(props: Props) {
   const separator = <span className={styles.separator}> | </span>;
 
   return (
-    <div>
-      <time className={styles.setting} dateTime={props.date.toISOString()}>
-        {date}
-      </time>
+    <div className={styles.container}>
+      <time dateTime={props.date.toISOString()}>{date}</time>
       {separator}
-      <span className={styles.setting}>{time}</span>
+      <span>{time}</span>
       {separator}
       {location}
     </div>