tailwind class name controlled for js file

public/css/app.css

@@ -1592,6 +1592,17 @@ button, input, optgroup, select, textarea{
         margin-left: unset !important;
     }
 
+/* width of container, custom choose */
+
+@media (min-width: 640px){
+
+  [custom-half]{
+    grid-column: span 3 / span 3 !important;
+  }
+}
+
+/* width of container, custom choose */
+
 *, ::before, ::after{
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;

resources/assets/js/views/settings/settings.js

@@ -142,13 +142,11 @@ const app = new Vue({
         },
 
         onSmallWidthColumn(item) {
-            this.$refs[item].$el.classList.remove('sm:col-span-6');
-            this.$refs[item].$el.classList.add('sm:col-span-3');
+            this.$refs[item].$el.setAttribute('custom-half', true);
         },
 
         onFullWidthColumn(item) {
-            this.$refs[item].$el.classList.add('sm:col-span-6');
-            this.$refs[item].$el.classList.remove('sm:col-span-3');
+            this.$refs[item].$el.removeAttribute('custom-half');
         },
 
         settingsInvoice() {

resources/assets/sass/app.css

@@ -239,6 +239,12 @@
     #button-monthly {
         margin-left: unset !important;
     }
+
+    /* width of container, custom choose */
+    [custom-half] {
+        @apply sm:col-span-3 !important;
+    }
+    /* width of container, custom choose */
 }
 
 /* menu */