Variable width cols

src/components/Collapsable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="collapsable">
+  <div :class="`collapsable col-${cols}`">
         <input
             :id="`collapsible-${uniqueKey}`"
             class="toggle"
@@ -10,7 +10,7 @@
             <h2>{{ title }}</h2>
         </label>
         <div class="collapsible-content">
-            <div class="content-inner">
+          <div class="content-inner">
             <slot></slot>
             </div>
         </div>
@@ -24,6 +24,7 @@ export default {
     uniqueKey: String,
     title: String,
     collapsed: Boolean,
+    cols: Number,
   },
   data() {
     return {
@@ -78,6 +79,12 @@ export default {
     background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
     box-shadow: 1px 1px 2px #130f23;
 
+    &.col-1 { width: 155px; }
+    &.col-2 { width: 310px; }
+    &.col-3 { width: 465px; }
+    &.col-4 { width: 620px; }
+    &.col-5 { width: 775px; }
+
     .wrap-collabsible {
         margin-bottom: 1.2rem 0;
     }

src/components/Item.vue

@@ -1,6 +1,6 @@
 <template>
     <el-tooltip placement="bottom" effect="dark" :content="description" :disabled="!description">
-        <div class="item" tabindex="0">
+        <div :class="`item ${!icon? 'short': ''}`" tabindex="0">
             <div class="tile-title" :id="`tile-${id}`">
                 <span class="text">{{ title }}</span>
                 <div class="overflow-dots">...</div>
@@ -75,6 +75,10 @@ export default {
         border: 2px solid #1CA8DD;
         outline: none;
     }
+    &.short {
+        border-radius: 30px;
+        height: 18px;
+    }
 }
 .tile-title {
     white-space: nowrap;

src/components/ItemGroup.vue

@@ -1,5 +1,5 @@
 <template>
-   <Collapsable :title="title" :uniqueKey="groupId" :collapsed="collapsed">
+   <Collapsable :title="title" :uniqueKey="groupId" :collapsed="collapsed" :cols="cols">
     <div v-if="!items || items.length < 1" class="no-items">
       No Items to Show Yet
     </div>
@@ -26,6 +26,7 @@ export default {
     groupId: String,
     title: String,
     collapsed: Boolean,
+    cols: Number,
     items: Array,
   },
   components: {