diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js
index 79def4d9f..a4f5aaea0 100644
--- a/components/lib/passthrough/tailwind/index.js
+++ b/components/lib/passthrough/tailwind/index.js
@@ -901,7 +901,13 @@ export default {
             class: 'w-full inline-flex'
         },
         input: ({ props }) => ({
-            class: [{ 'rounded-tr-none rounded-br-none': props.showButtons && props.buttonLayout == 'stacked' }]
+            class: [
+                { 
+                    'rounded-tr-none rounded-br-none': props.showButtons && props.buttonLayout == 'stacked' 
+                },
+                { 
+                    'order-2': props.buttonLayout == 'horizontal' 
+                }]
         }),
         buttongroup: ({ props }) => ({
             class: [{ 'flex flex-col': props.showButtons && props.buttonLayout == 'stacked' }]
@@ -911,6 +917,9 @@ export default {
                 'flex !items-center !justify-center',
                 {
                     'rounded-br-none rounded-bl-none rounded-bl-none !p-0 flex-1 w-[3rem]': props.showButtons && props.buttonLayout == 'stacked'
+                },
+                { 
+                    'order-3': props.buttonLayout == 'horizontal' 
                 }
             ]
         }),
@@ -922,6 +931,9 @@ export default {
                 'flex !items-center !justify-center',
                 {
                     'rounded-tr-none rounded-tl-none rounded-tl-none !p-0 flex-1 w-[3rem]': props.showButtons && props.buttonLayout == 'stacked'
+                },              
+                { 
+                    'order-1': props.buttonLayout == 'horizontal' 
                 }
             ]
         })