diff --git a/packages/ui/src/components/Form/Input/InputKeyValue.vue b/packages/ui/src/components/Form/Input/InputKeyValue.vue
index 442cf6c3b..def160fc5 100644
--- a/packages/ui/src/components/Form/Input/InputKeyValue.vue
+++ b/packages/ui/src/components/Form/Input/InputKeyValue.vue
@@ -12,8 +12,8 @@ const value = defineModel<string>('propertyValue', { required: true })
 </script>
 
 <template>
-  <div flex="~ gap-2">
-    <Input v-model="key" :placeholder="props.keyPlaceholder" class="w-1/2" />
-    <Input v-model="value" :placeholder="props.valuePlaceholder" class="w-1/2" />
+  <div :class="['flex', 'gap-2']">
+    <Input v-model="key" :placeholder="props.keyPlaceholder" :class="['w-1/2']" />
+    <Input v-model="value" :placeholder="props.valuePlaceholder" :class="['w-1/2']" />
   </div>
 </template>