diff --git a/packages/theme-saas/src/query-builder/index.less b/packages/theme-saas/src/query-builder/index.less
index 447b289a4..c1d79e211 100644
--- a/packages/theme-saas/src/query-builder/index.less
+++ b/packages/theme-saas/src/query-builder/index.less
@@ -171,6 +171,28 @@
     flex: auto;
   }
 
+  .custom-rule-value-editor {
+    display: flex;
+    width: 40%;
+
+    & > div {
+      width: 100%;
+    }
+
+    &_multi {
+      display: flex;
+      gap: 8px;
+
+      &-item {
+        width: 50%;
+
+        & > div {
+          width: 100%;
+        }
+      }
+    }
+  }
+
   .rule-item--wrap {
     display: flex;
     padding: 0 10px;
diff --git a/packages/theme/src/query-builder/index.less b/packages/theme/src/query-builder/index.less
index 340eea396..56a6d8535 100644
--- a/packages/theme/src/query-builder/index.less
+++ b/packages/theme/src/query-builder/index.less
@@ -167,6 +167,28 @@
     flex: auto;
   }
 
+  .custom-rule-value-editor {
+    display: flex;
+    width: 40%;
+
+    & > div {
+      width: 100%;
+    }
+
+    &_multi {
+      display: flex;
+      gap: 8px;
+
+      &-item {
+        width: 50%;
+
+        & > div {
+          width: 100%;
+        }
+      }
+    }
+  }
+
   .rule-item--wrap {
     display: flex;
     padding: 0 10px;
diff --git a/packages/vue/src/query-builder/src/components/ValueEditor.vue b/packages/vue/src/query-builder/src/components/ValueEditor.vue
index febdad109..36eb21e0d 100644
--- a/packages/vue/src/query-builder/src/components/ValueEditor.vue
+++ b/packages/vue/src/query-builder/src/components/ValueEditor.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!show" class="hide"></div>
+  <div v-if="!show" style="display: none"></div>
   <span
     v-else-if="['text', 'select'].includes(type) && ['between', 'notBetween'].includes(operator)"
     :data-testid="testID"
@@ -66,9 +66,9 @@
       :events="{ change }"
     ></custom-input>
   </span>
-  <span v-else-if="type === 'custom' && allProps.fieldData.component">
-    <div v-if="['between', 'notBetween'].includes(operator)">
-      <div v-for="(key, i) in ['from', 'to']" :key="key">
+  <span v-else-if="type === 'custom' && allProps.fieldData.component" class="custom-rule-value-editor">
+    <div v-if="['between', 'notBetween'].includes(operator)" class="custom-rule-value-editor_multi">
+      <div v-for="(key, i) in ['from', 'to']" :key="key" class="custom-rule-value-editor_multi-item">
         <component
           :is="allProps.fieldData.component"
           v-bind="getProps(allProps.fieldData)"