diff --git a/packages/calcite-components/src/components/alert/alert.scss b/packages/calcite-components/src/components/alert/alert.scss
index 26e29bd72a5..2493b552855 100644
--- a/packages/calcite-components/src/components/alert/alert.scss
+++ b/packages/calcite-components/src/components/alert/alert.scss
@@ -65,19 +65,20 @@ $border-style: 1px solid var(--calcite-ui-border-3);
 }
 
 .content {
-  @apply box-border flex flex-auto flex-col transition-default;
+  @apply box-border flex flex-auto flex-row transition-default;
   padding-block: var(--calcite-alert-spacing-token-small);
   padding-inline: var(--calcite-alert-spacing-token-large) var(--calcite-alert-spacing-token-small);
 }
 
 .icon {
-  @apply flex flex-col items-center justify-start p-0;
-  margin-block-end: var(--calcite-alert-spacing-token-large);
-  margin-inline-end: auto;
+  @apply flex flex-col items-center justify-center p-0;
+  margin-inline-end: 0;
+  margin-block: 0;
+  padding-inline-end: var(--calcite-alert-spacing-token-large);
 }
 
 .close {
-  @apply bg-transparent border-none cursor-pointer flex items-start justify-end outline-none self-start text-color-3;
+  @apply bg-transparent border-none cursor-pointer flex items-center justify-end outline-none self-stretch text-color-3;
   -webkit-appearance: none;
   padding: var(--calcite-alert-spacing-token-large);
 
@@ -151,15 +152,8 @@ $border-style: 1px solid var(--calcite-ui-border-3);
 }
 
 .footer {
-  @apply flex justify-end order-1 pt-px relative w-full;
-  block-size: var(--calcite-alert-footer-height);
-
-  &:before {
-    content: "";
-    @apply absolute top-0;
-    inset-inline: var(--calcite-alert-footer-divider-gap);
-    border-block-start: $border-style;
-  }
+  @apply flex justify-end pt-px relative self-stretch w-auto;
+  block-size: inherit;
 }
 
 // scale variables
@@ -319,42 +313,5 @@ $alertDurations: "fast" 6000ms, "medium" 10000ms, "slow" 14000ms;
   @apply absolute;
 }
 
-@container responsive-container (min-width: #{$breakpoint-width-xs}) {
-  .content {
-    @apply flex-row;
-  }
-
-  .close {
-    @apply items-center self-stretch;
-  }
-
-  .icon {
-    @apply justify-center;
-    margin-inline-end: 0;
-    margin-block: 0;
-    padding-inline-end: var(--calcite-alert-spacing-token-large);
-  }
-}
-
-@container responsive-container (min-width: #{$breakpoint-width-sm}) {
-  .close {
-    @apply self-stretch;
-  }
-
-  .footer {
-    @apply self-stretch w-auto;
-    order: initial;
-    block-size: inherit;
-
-    &:before {
-      content: none;
-    }
-  }
-
-  .icon {
-    padding-inline: var(--calcite-alert-spacing-token-large) 0;
-  }
-}
-
 @include base-component();
 @include calciteHydratedHidden();
diff --git a/packages/calcite-components/src/components/alert/alert.stories.ts b/packages/calcite-components/src/components/alert/alert.stories.ts
index d5a640687d2..3ee99ae940f 100644
--- a/packages/calcite-components/src/components/alert/alert.stories.ts
+++ b/packages/calcite-components/src/components/alert/alert.stories.ts
@@ -1,11 +1,9 @@
 import { select } from "@storybook/addon-knobs";
 import { boolean, iconNames, storyFilters } from "../../../.storybook/helpers";
-import { createBreakpointStories, modesDarkDefault } from "../../../.storybook/utils";
+import { modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import readme from "./readme.md";
 
-const openAlertScreenshotDelay = 1000;
-
 export default {
   title: "Components/Alert",
   parameters: {
@@ -220,121 +218,3 @@ export const autoClosableRetainsCloseButton_TestOnly = (): string => html`
     <calcite-link slot="link" title="my action" role="presentation"> Take action </calcite-link>
   </calcite-alert>
 `;
-
-// we use individual stories since we can't display multiple open alerts at the same time
-
-const breakpointsStoryTemplate = html`
-  <style>
-    .breakpoint-stories-container {
-      height: 600px;
-
-      /* force fixed container placement on the breakpoint-sized stories container */
-      contain: layout;
-    }
-  </style>
-  <calcite-alert icon open scale="{scale}">
-    <div slot="title">title</div>
-    <div slot="message">message</div>
-    <calcite-action scale="{scale}" slot="actions-end" title="Tips" icon="lightbulb"></calcite-action>
-    <calcite-action scale="{scale}" slot="actions-end" title="Get info" icon="attachment"></calcite-action>
-  </calcite-alert>
-  <calcite-alert icon scale="{scale}">
-    <div slot="title">title</div>
-    <div slot="message">message</div>
-    <calcite-action scale="{scale}" slot="actions-end" title="Tips" icon="lightbulb"></calcite-action>
-    <calcite-action scale="{scale}" slot="actions-end" title="Get info" icon="attachment"></calcite-action>
-  </calcite-alert>
-  <script>
-    (async function () {
-      await customElements.whenDefined("calcite-alert");
-      const alert2 = document.querySelectorAll("calcite-alert")[1];
-      await alert2.componentOnReady();
-
-      requestAnimationFrame(() => (alert2.open = true));
-    })();
-  </script>
-`;
-
-export const breakpointsXsmallScaleS_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "xsmall", scale: "s" });
-
-breakpointsXsmallScaleS_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsSmallScaleS_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "small", scale: "s" });
-
-breakpointsSmallScaleS_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsMediumScaleS_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "medium", scale: "s" });
-
-breakpointsMediumScaleS_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsLargeScaleS_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "large", scale: "s" });
-
-breakpointsLargeScaleS_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsXsmallScaleM_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "xsmall", scale: "m" });
-
-breakpointsXsmallScaleM_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsSmallScaleM_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "small", scale: "m" });
-
-breakpointsSmallScaleM_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsMediumScaleM_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "medium", scale: "m" });
-
-breakpointsMediumScaleM_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsLargeScaleM_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "large", scale: "m" });
-
-breakpointsLargeScaleM_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsXsmallScaleL_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "xsmall", scale: "l" });
-
-breakpointsXsmallScaleL_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsSmallScaleL_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "small", scale: "l" });
-
-breakpointsSmallScaleL_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsMediumScaleL_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "medium", scale: "l" });
-
-breakpointsMediumScaleL_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsLargeScaleL_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "large", scale: "l" });
-
-breakpointsLargeScaleL_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx
index c3f1c2fc45a..ed4c3cd2d65 100644
--- a/packages/calcite-components/src/components/alert/alert.tsx
+++ b/packages/calcite-components/src/components/alert/alert.tsx
@@ -46,8 +46,6 @@ import { KindIcons } from "../resources";
 import { AlertMessages } from "./assets/alert/t9n";
 import { AlertDuration, Sync, Unregister } from "./interfaces";
 import { CSS, DURATIONS, SLOTS } from "./resources";
-import { createObserver } from "../../utils/observers";
-import { breakpoints } from "../../utils/responsive";
 
 /**
  * Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned
@@ -175,9 +173,6 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
     if (open && !this.queued) {
       this.calciteInternalAlertRegister.emit();
     }
-    if (this.transitionEl) {
-      this.resizeObserver?.observe(this.transitionEl);
-    }
   }
 
   async componentWillLoad(): Promise<void> {
@@ -190,7 +185,6 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
 
   componentDidLoad(): void {
     setComponentLoaded(this);
-    this.resizeObserver?.observe(this.transitionEl);
   }
 
   disconnectedCallback(): void {
@@ -204,7 +198,6 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
     disconnectLocalized(this);
     disconnectMessages(this);
     this.slottedInShell = false;
-    this.resizeObserver?.disconnect();
   }
 
   render(): VNode {
@@ -215,11 +208,8 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
     };
 
     const { hasEndActions } = this;
-    const { open, autoClose, responsiveContainerWidth, label, placement, queued } = this;
+    const { open, autoClose, label, placement, queued } = this;
     const role = autoClose ? "alert" : "alertdialog";
-    const widthBreakpoints = breakpoints.width;
-    const lessThanSmall = responsiveContainerWidth < widthBreakpoints.small;
-    const greaterOrEqualThanSmall = responsiveContainerWidth >= widthBreakpoints.small;
     const hidden = !open;
     const effectiveIcon = setRequestedIcon(KindIcons, this.icon, this.kind);
     const hasQueuedAlerts = this.queueLength > 1;
@@ -244,9 +234,8 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
           ref={this.setTransitionEl}
         >
           <div class={CSS.contentContainer}>
-            {effectiveIcon && greaterOrEqualThanSmall ? this.renderIcon(effectiveIcon) : null}
+            {effectiveIcon && this.renderIcon(effectiveIcon)}
             <div class={CSS.content}>
-              {effectiveIcon && lessThanSmall ? this.renderIcon(effectiveIcon) : null}
               <div class={CSS.textContainer}>
                 <slot name={SLOTS.title} />
                 <slot name={SLOTS.message} />
@@ -254,12 +243,11 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
               </div>
             </div>
           </div>
-          {lessThanSmall ? this.renderCloseButton() : null}
           <div class={CSS.footer} hidden={!hasEndActions && !hasQueuedAlerts}>
             {this.renderActionsEnd()}
             {hasQueuedAlerts ? this.renderQueueCount() : null}
           </div>
-          {greaterOrEqualThanSmall ? this.renderCloseButton() : null}
+          {this.renderCloseButton()}
           {open && !queued && autoClose ? <div class={CSS.dismissProgress} /> : null}
         </div>
       </Host>
@@ -434,8 +422,6 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
   /** is the alert queued */
   @State() queued = false;
 
-  @State() responsiveContainerWidth: number;
-
   private autoCloseTimeoutId: number = null;
 
   private closeButton: HTMLButtonElement;
@@ -446,11 +432,6 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
 
   private queueTimeout: number;
 
-  private resizeObserver = createObserver(
-    "resize",
-    (entries) => (this.responsiveContainerWidth = entries[0].contentRect.width)
-  );
-
   private totalOpenTime = 0;
 
   private totalHoverTime = 0;