💫 (button) finish button fade animation

src/components/IntervalInput.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="interval-input">
     <transition name="fade" mode="out-in">
-      <button v-show="editable" @click="minus">
+      <button v-if="editable" class="spacer" @click="minus">
         <img key="minus" src="@/assets/minus.svg" alt="minus" />
       </button>
+      <div v-else class="spacer"></div>
     </transition>
+    <h3>{{ label }}</h3>
     <transition name="fade" mode="out-in">
-      <h3>{{ label }}</h3>
-    </transition>
-    <transition name="fade" mode="out-in">
-      <button v-show="editable" @click="plus">
+      <button v-if="editable" class="spacer" @click="plus">
         <img key="plus" src="@/assets/plus.svg" alt="plus" />
       </button>
+      <div v-else class="spacer"></div>
     </transition>
   </div>
 </template>
@@ -30,10 +30,10 @@ export default defineComponent({
 
     const label = computed(() => {
       if (interval.value === minInterval) {
-        return '30s session'
+        return '30 second session'
       }
 
-      return `${interval.value}min session`
+      return `${interval.value} minute session`
     })
 
     return {
@@ -53,16 +53,23 @@ $button-size: 50px;
   display: flex;
   justify-content: center;
   align-items: center;
-  flex-wrap: wrap;
+
+  h3 {
+    flex: 1;
+    line-height: 2rem;
+  }
 
   button {
     display: flex;
     justify-content: center;
     align-items: center;
-    margin: 0 1rem;
     font-size: 2rem;
+  }
+
+  .spacer {
     width: $button-size;
     height: $button-size;
+    margin: 0 1rem;
   }
 }
 </style>