diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.scss b/packages/calcite-components/src/components/accordion-item/accordion-item.scss
index 1a22c750ce9..202198bea66 100644
--- a/packages/calcite-components/src/components/accordion-item/accordion-item.scss
+++ b/packages/calcite-components/src/components/accordion-item/accordion-item.scss
@@ -147,7 +147,10 @@
 
 .actions-start,
 .actions-end {
-  @apply flex items-center;
+  @apply flex items-stretch;
+  * {
+    @apply items-stretch;
+  }
 }
 
 .icon {
diff --git a/packages/calcite-components/src/components/accordion/accordion.stories.ts b/packages/calcite-components/src/components/accordion/accordion.stories.ts
index 796e8df31d0..b9aca857abf 100644
--- a/packages/calcite-components/src/components/accordion/accordion.stories.ts
+++ b/packages/calcite-components/src/components/accordion/accordion.stories.ts
@@ -217,3 +217,14 @@ const accordionItemsIconHeaderUseCases = iconHeaderUseCasesArr
 export const longHeading_MediumIconForLargeAccordionItem_TestOnly = (): string => html`
   <calcite-accordion scale="l" style="width: 600px"> ${accordionItemsIconHeaderUseCases} </calcite-accordion>
 `;
+export const slottedItemsStretched = (): string => html`
+  <calcite-accordion scale="l">
+    <calcite-accordion-item description="Yachts, boats, and dinghies" heading="Watercraft" icon-start="embark">
+      <calcite-action slot="actions-start" icon="smile"> </calcite-action>
+      <calcite-notice open>
+        <div slot="message">Recommended for coastal use</div>
+      </calcite-notice>
+      <calcite-action slot="actions-end" icon="smile"></calcite-action>
+    </calcite-accordion-item>
+  </calcite-accordion>
+`;
diff --git a/packages/calcite-components/src/demos/accordion.html b/packages/calcite-components/src/demos/accordion.html
index 212312cc7d3..c69c7c17c5e 100644
--- a/packages/calcite-components/src/demos/accordion.html
+++ b/packages/calcite-components/src/demos/accordion.html
@@ -904,6 +904,39 @@ <h1 style="margin: 0 auto; text-align: center">Accordion</h1>
           </calcite-accordion>
         </div>
       </div>
+      <div class="parent">
+        <div class="child right-aligned-text">Slotted Actions</div>
+        <div class="child">
+          <calcite-accordion scale="s">
+            <calcite-accordion-item description="Yachts, boats, and dinghies" heading="Watercraft" icon-start="embark">
+              <calcite-action slot="actions-start" icon="smile"> </calcite-action>
+              <calcite-notice open>
+                <div slot="message">Recommended for coastal use</div>
+              </calcite-notice>
+            </calcite-accordion-item>
+          </calcite-accordion>
+        </div>
+        <div class="child">
+          <calcite-accordion scale="m">
+            <calcite-accordion-item description="Yachts, boats, and dinghies" heading="Watercraft" icon-start="embark">
+              <calcite-action slot="actions-start" icon="smile"> </calcite-action>
+              <calcite-notice open>
+                <div slot="message">Recommended for coastal use</div>
+              </calcite-notice>
+            </calcite-accordion-item>
+          </calcite-accordion>
+        </div>
+        <div class="child">
+          <calcite-accordion scale="l">
+            <calcite-accordion-item description="Yachts, boats, and dinghies" heading="Watercraft" icon-start="embark">
+              <calcite-action slot="actions-start" icon="smile"> </calcite-action>
+              <calcite-notice open>
+                <div slot="message">Recommended for coastal use</div>
+              </calcite-notice>
+            </calcite-accordion-item>
+          </calcite-accordion>
+        </div>
+      </div>
 
       <!-- Theme-ing -->
       <demo-theme