diff --git a/packages/react/src/components/TextArea/TextArea.tsx b/packages/react/src/components/TextArea/TextArea.tsx
index dfbb03297d60..81236abd643b 100644
--- a/packages/react/src/components/TextArea/TextArea.tsx
+++ b/packages/react/src/components/TextArea/TextArea.tsx
@@ -324,6 +324,7 @@ const TextArea = React.forwardRef((props: TextAreaProps, forwardRef) => {
   const formItemClasses = classNames(`${prefix}--form-item`, className);
 
   const textAreaWrapperClasses = classNames(`${prefix}--text-area__wrapper`, {
+    [`${prefix}--text-area__wrapper--cols`]: other.cols,
     [`${prefix}--text-area__wrapper--readonly`]: other.readOnly,
     [`${prefix}--text-area__wrapper--warn`]: warn,
     [`${prefix}--text-area__wrapper--slug`]: slug,
diff --git a/packages/styles/scss/components/text-area/_text-area.scss b/packages/styles/scss/components/text-area/_text-area.scss
index 8ae1cbfdf4ac..a248b1952ca3 100644
--- a/packages/styles/scss/components/text-area/_text-area.scss
+++ b/packages/styles/scss/components/text-area/_text-area.scss
@@ -69,6 +69,11 @@
     position: relative;
     display: flex;
     inline-size: 100%;
+    max-inline-size: 100%;
+  }
+
+  .#{$prefix}--text-area__wrapper--cols {
+    inline-size: auto;
   }
 
   .#{$prefix}--text-area__invalid-icon {