diff --git a/packages/calcite-components/src/components/text-area/resources.ts b/packages/calcite-components/src/components/text-area/resources.ts
index 965d6d7bb39..ce9c9e3b8aa 100644
--- a/packages/calcite-components/src/components/text-area/resources.ts
+++ b/packages/calcite-components/src/components/text-area/resources.ts
@@ -25,5 +25,3 @@ export const SLOTS = {
   footerStart: "footer-start",
   footerEnd: "footer-end",
 };
-
-export const RESIZE_TIMEOUT = 100;
diff --git a/packages/calcite-components/src/components/text-area/text-area.e2e.ts b/packages/calcite-components/src/components/text-area/text-area.e2e.ts
index 56aa1d3aa63..5d8b532c680 100644
--- a/packages/calcite-components/src/components/text-area/text-area.e2e.ts
+++ b/packages/calcite-components/src/components/text-area/text-area.e2e.ts
@@ -18,7 +18,7 @@ import { CSS } from "./resources";
 
 describe("calcite-text-area", () => {
   describe("renders", () => {
-    renders("calcite-text-area", { display: "inline-block" });
+    renders("calcite-text-area", { display: "block" });
   });
 
   describe("defaults", () => {
diff --git a/packages/calcite-components/src/components/text-area/text-area.scss b/packages/calcite-components/src/components/text-area/text-area.scss
index d0beeb0fdb9..a83397408db 100644
--- a/packages/calcite-components/src/components/text-area/text-area.scss
+++ b/packages/calcite-components/src/components/text-area/text-area.scss
@@ -17,25 +17,25 @@
  */
 
 :host {
-  @apply inline-block relative w-full h-full;
+  @apply block relative;
 
   --calcite-internal-text-area-border-color: var(--calcite-text-area-border-color, var(--calcite-color-border-input));
   --calcite-internal-text-area-footer-border-color: var(
     --calcite-text-area-footer-border-color,
     var(--calcite-internal-text-area-border-color)
   );
+  --calcite-internal-text-area-footer-block-size: 2.25rem;
 }
 
 .text-area,
 .footer {
   font-size: var(--calcite-text-area-font-size, var(--calcite-font-size--1));
   background-color: var(--calcite-text-area-background-color, var(--calcite-color-foreground-1));
-  padding-block: var(--calcite-spacing-sm);
-  padding-inline: var(--calcite-spacing-md);
 }
 
 .text-area {
   @apply relative font-sans block box-border w-full m-0;
+  block-size: calc(100% - var(--calcite-internal-text-area-footer-block-size,));
 
   --calcite-internal-text-area-border-block-end-color: var(--calcite-internal-text-area-border-color);
 
@@ -47,7 +47,7 @@
   max-block-size: var(--calcite-text-area-max-height);
   min-block-size: var(--calcite-text-area-min-height);
   max-inline-size: var(--calcite-text-area-max-width);
-  min-inline-size: var(--calcite-text-area-min-width, theme("spacing.48"));
+  min-inline-size: var(--calcite-text-area-min-width);
 
   &::placeholder {
     @apply font-normal;
@@ -85,7 +85,7 @@
   @apply flex box-border items-center;
   border: var(--calcite-border-width-sm) solid var(--calcite-internal-text-area-footer-border-color);
   border-block-start: var(--calcite-border-width-none);
-  min-block-size: 2.25rem;
+  block-size: var(--calcite-internal-text-area-footer-block-size);
 }
 
 .character-limit {
@@ -141,6 +141,7 @@
 }
 
 :host([scale="s"]) {
+  --calcite-internal-text-area-footer-block-size: 1.75rem;
   .text-area,
   .footer,
   .character-limit {
@@ -148,27 +149,20 @@
     font-size: var(--calcite-text-area-font-size, var(--calcite-font-size--2));
   }
 
-  .footer {
-    min-block-size: 1.75rem;
-  }
-
   .text-area {
     @apply py-1 px-2;
   }
 }
 
 :host([scale="m"]) {
-  .text-area {
-    @apply py-2 px-3;
-  }
-
+  .text-area,
   .footer {
     @apply py-2 px-3;
-    min-block-size: 2.25rem;
   }
 }
 
 :host([scale="l"]) {
+  --calcite-internal-text-area-footer-block-size: 3rem;
   .text-area,
   .footer {
     font-size: var(--calcite-text-area-font-size, var(--calcite-font-size-0));
@@ -176,12 +170,6 @@
     padding-inline: var(--calcite-spacing-lg);
   }
 
-  .footer {
-    min-block-size: 2.75rem;
-  }
-
-  .text-area,
-  .footer,
   .character-limit {
     font-size: var(--calcite-text-area-font-size, var(--calcite-font-size-0));
     padding-inline-start: var(--calcite-spacing-lg);
diff --git a/packages/calcite-components/src/components/text-area/text-area.tsx b/packages/calcite-components/src/components/text-area/text-area.tsx
index 2bb6404cbbb..c8e55defdcf 100644
--- a/packages/calcite-components/src/components/text-area/text-area.tsx
+++ b/packages/calcite-components/src/components/text-area/text-area.tsx
@@ -1,5 +1,3 @@
-// @ts-strict-ignore
-import { throttle } from "lodash-es";
 import { createRef } from "lit-html/directives/ref.js";
 import {
   LitElement,
@@ -44,7 +42,7 @@ import { useT9n } from "../../controllers/useT9n";
 import type { Label } from "../label/label";
 import { CharacterLengthObj } from "./interfaces";
 import T9nStrings from "./assets/t9n/messages.en.json";
-import { CSS, IDS, SLOTS, RESIZE_TIMEOUT } from "./resources";
+import { CSS, IDS, SLOTS } from "./resources";
 import { styles } from "./text-area.scss";
 
 declare global {
@@ -94,31 +92,15 @@ export class TextArea
 
   private resizeObserver = createObserver("resize", async () => {
     await componentLoaded(this);
-    const { textAreaHeight, textAreaWidth, elHeight, elWidth, footerHeight, footerWidth } =
-      this.getHeightAndWidthOfElements();
-    if (footerWidth > 0 && footerWidth !== textAreaWidth) {
-      this.footerEl.value.style.width = `${textAreaWidth}px`;
-    }
-    if (elWidth !== textAreaWidth || elHeight !== textAreaHeight + (footerHeight || 0)) {
-      this.setHeightAndWidthToAuto();
-    }
-  });
+    const isFooterHidden = this.footerEl.value.classList.contains(CSS.hide);
 
-  // height and width are set to auto here to avoid overlapping on to neighboring elements in the layout when user starts resizing.
-
-  // throttle is used to avoid flashing of textarea when user resizes.
-  private setHeightAndWidthToAuto = throttle(
-    (): void => {
-      if (this.resize === "vertical" || this.resize === "both") {
-        this.el.style.height = "auto";
-      }
-      if (this.resize === "horizontal" || this.resize === "both") {
-        this.el.style.width = "auto";
+    if (!isFooterHidden) {
+      const { textAreaWidth, footerWidth } = this.getWidthOfTextareaAndFooter();
+      if (footerWidth > 0 && footerWidth !== textAreaWidth) {
+        this.footerEl.value.style.width = `${textAreaWidth}px`;
       }
-    },
-    RESIZE_TIMEOUT,
-    { leading: false },
-  );
+    }
+  });
 
   private textAreaEl: HTMLTextAreaElement;
 
@@ -316,7 +298,6 @@ export class TextArea
 
   override updated(): void {
     updateHostInteraction(this);
-    this.setTextAreaHeight();
   }
 
   loaded(): void {
@@ -397,34 +378,15 @@ export class TextArea
     this.resizeObserver?.observe(el);
   }
 
-  private setTextAreaHeight(): void {
-    const { textAreaHeight, elHeight, footerHeight } = this.getHeightAndWidthOfElements();
-    if (footerHeight > 0 && textAreaHeight + footerHeight != elHeight) {
-      this.textAreaEl.style.height = `${elHeight - footerHeight}px`;
-    }
-  }
-
-  private getHeightAndWidthOfElements(): {
-    textAreaHeight: number;
+  private getWidthOfTextareaAndFooter(): {
     textAreaWidth: number;
-    elHeight: number;
-    elWidth: number;
-    footerHeight: number;
     footerWidth: number;
   } {
-    const { height: textAreaHeight, width: textAreaWidth } =
-      this.textAreaEl.getBoundingClientRect();
-    const { height: elHeight, width: elWidth } = this.el.getBoundingClientRect();
-    const { height: footerHeight, width: footerWidth } = this.footerEl.value
-      ? this.footerEl.value.getBoundingClientRect()
-      : { height: 0, width: 0 };
+    const textAreaWidth = this.textAreaEl.getBoundingClientRect().width;
+    const footerWidth = this.footerEl.value.getBoundingClientRect().width;
 
     return {
-      textAreaHeight,
       textAreaWidth,
-      elHeight,
-      elWidth,
-      footerHeight,
       footerWidth,
     };
   }