diff --git a/CHANGELOG.md b/CHANGELOG.md
index e8255121914..353b39b31a1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 - Added `EuiSuggestItem` component ([#2090](https://github.com/elastic/eui/pull/2090))
 - Added support for negated or clauses to `EuiSearchBar` ([#2140](https://github.com/elastic/eui/pull/2140))
 - Added `transition` utility services to help create timeouts that account for CSS transition durations and delays ([#2136](https://github.com/elastic/eui/pull/2136))
+- Removed `EuiFlexGroup` dependency from `EuiAccordion` ([#2143](https://github.com/elastic/eui/pull/2143))
 
 **Bug fixes**
 
diff --git a/src-docs/src/views/accordion/accordion_form.js b/src-docs/src/views/accordion/accordion_form.js
index b3a41a12e86..9cd8ca55c39 100644
--- a/src-docs/src/views/accordion/accordion_form.js
+++ b/src-docs/src/views/accordion/accordion_form.js
@@ -45,7 +45,7 @@ const repeatableForm = (
 
 const buttonContent = (
   <div>
-    <EuiFlexGroup gutterSize="s" alignItems="center">
+    <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
       <EuiFlexItem grow={false}>
         <EuiIcon type="logoWebhook" size="m" />
       </EuiFlexItem>
diff --git a/src-docs/src/views/accordion/accordion_multiple.js b/src-docs/src/views/accordion/accordion_multiple.js
index 23890a99b82..42bd49e8332 100644
--- a/src-docs/src/views/accordion/accordion_multiple.js
+++ b/src-docs/src/views/accordion/accordion_multiple.js
@@ -19,7 +19,8 @@ export default () => (
 
     <EuiAccordion
       id="accordion2"
-      buttonContent="A second accordion with padding"
+      buttonContent="A second accordion with padding and a very long title that should truncate because of eui-textTruncate"
+      buttonContentClassName="eui-textTruncate"
       paddingSize="l">
       <EuiText>
         <p>The content inside can be of any height.</p>
diff --git a/src/components/accordion/__snapshots__/accordion.test.tsx.snap b/src/components/accordion/__snapshots__/accordion.test.tsx.snap
index 612606f1323..e4bab329327 100644
--- a/src/components/accordion/__snapshots__/accordion.test.tsx.snap
+++ b/src/components/accordion/__snapshots__/accordion.test.tsx.snap
@@ -9,75 +9,44 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
   <div
     className="euiAccordion"
   >
-    <EuiFlexGroup
-      alignItems="center"
-      gutterSize="none"
+    <div
+      className="euiAccordion__triggerWrapper"
     >
-      <div
-        className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+      <button
+        aria-controls="6"
+        aria-expanded={false}
+        className="euiAccordion__button"
+        onClick={[Function]}
+        type="button"
       >
-        <EuiFlexItem>
-          <div
-            className="euiFlexItem"
+        <span
+          className="euiAccordion__iconWrapper"
+        >
+          <EuiIcon
+            className="euiAccordion__icon"
+            size="m"
+            type="arrowRight"
           >
-            <button
-              aria-controls="6"
-              aria-expanded={false}
-              className="euiAccordion__button"
-              onClick={[Function]}
-              type="button"
+            <EuiIconEmpty
+              className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
+              focusable="false"
+              style={null}
             >
-              <EuiFlexGroup
-                alignItems="center"
-                gutterSize="s"
-                responsive={false}
-              >
-                <div
-                  className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                >
-                  <EuiFlexItem
-                    className="euiAccordion__iconWrapper"
-                    grow={false}
-                  >
-                    <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero euiAccordion__iconWrapper"
-                    >
-                      <EuiIcon
-                        size="m"
-                        type="arrowRight"
-                      >
-                        <EuiIconEmpty
-                          className="euiIcon euiIcon--medium euiIcon-isLoading"
-                          focusable="false"
-                          style={null}
-                        >
-                          <svg
-                            className="euiIcon euiIcon--medium euiIcon-isLoading"
-                            focusable="false"
-                            height={16}
-                            style={null}
-                            viewBox="0 0 16 16"
-                            width={16}
-                            xmlns="http://www.w3.org/2000/svg"
-                          />
-                        </EuiIconEmpty>
-                      </EuiIcon>
-                    </div>
-                  </EuiFlexItem>
-                  <EuiFlexItem
-                    className="euiAccordion__buttonContent"
-                  >
-                    <div
-                      className="euiFlexItem euiAccordion__buttonContent"
-                    />
-                  </EuiFlexItem>
-                </div>
-              </EuiFlexGroup>
-            </button>
-          </div>
-        </EuiFlexItem>
-      </div>
-    </EuiFlexGroup>
+              <svg
+                className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
+                focusable="false"
+                height={16}
+                style={null}
+                viewBox="0 0 16 16"
+                width={16}
+                xmlns="http://www.w3.org/2000/svg"
+              />
+            </EuiIconEmpty>
+          </EuiIcon>
+        </span>
+        <span />
+      </button>
+    </div>
     <div
       className="euiAccordion__childWrapper"
       id="6"
@@ -114,75 +83,44 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
   <div
     className="euiAccordion euiAccordion-isOpen"
   >
-    <EuiFlexGroup
-      alignItems="center"
-      gutterSize="none"
+    <div
+      className="euiAccordion__triggerWrapper"
     >
-      <div
-        className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+      <button
+        aria-controls="5"
+        aria-expanded={true}
+        className="euiAccordion__button"
+        onClick={[Function]}
+        type="button"
       >
-        <EuiFlexItem>
-          <div
-            className="euiFlexItem"
+        <span
+          className="euiAccordion__iconWrapper"
+        >
+          <EuiIcon
+            className="euiAccordion__icon"
+            size="m"
+            type="arrowDown"
           >
-            <button
-              aria-controls="5"
-              aria-expanded={true}
-              className="euiAccordion__button"
-              onClick={[Function]}
-              type="button"
+            <EuiIconEmpty
+              className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
+              focusable="false"
+              style={null}
             >
-              <EuiFlexGroup
-                alignItems="center"
-                gutterSize="s"
-                responsive={false}
-              >
-                <div
-                  className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                >
-                  <EuiFlexItem
-                    className="euiAccordion__iconWrapper"
-                    grow={false}
-                  >
-                    <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero euiAccordion__iconWrapper"
-                    >
-                      <EuiIcon
-                        size="m"
-                        type="arrowDown"
-                      >
-                        <EuiIconEmpty
-                          className="euiIcon euiIcon--medium euiIcon-isLoading"
-                          focusable="false"
-                          style={null}
-                        >
-                          <svg
-                            className="euiIcon euiIcon--medium euiIcon-isLoading"
-                            focusable="false"
-                            height={16}
-                            style={null}
-                            viewBox="0 0 16 16"
-                            width={16}
-                            xmlns="http://www.w3.org/2000/svg"
-                          />
-                        </EuiIconEmpty>
-                      </EuiIcon>
-                    </div>
-                  </EuiFlexItem>
-                  <EuiFlexItem
-                    className="euiAccordion__buttonContent"
-                  >
-                    <div
-                      className="euiFlexItem euiAccordion__buttonContent"
-                    />
-                  </EuiFlexItem>
-                </div>
-              </EuiFlexGroup>
-            </button>
-          </div>
-        </EuiFlexItem>
-      </div>
-    </EuiFlexGroup>
+              <svg
+                className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
+                focusable="false"
+                height={16}
+                style={null}
+                viewBox="0 0 16 16"
+                width={16}
+                xmlns="http://www.w3.org/2000/svg"
+              />
+            </EuiIconEmpty>
+          </EuiIcon>
+        </span>
+        <span />
+      </button>
+    </div>
     <div
       className="euiAccordion__childWrapper"
       id="5"
@@ -217,38 +155,28 @@ exports[`EuiAccordion is rendered 1`] = `
   data-test-subj="test subject string"
 >
   <div
-    class="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+    class="euiAccordion__triggerWrapper"
   >
-    <div
-      class="euiFlexItem"
+    <button
+      aria-controls="0"
+      aria-expanded="false"
+      class="euiAccordion__button"
+      type="button"
     >
-      <button
-        aria-controls="0"
-        aria-expanded="false"
-        class="euiAccordion__button"
-        type="button"
+      <span
+        class="euiAccordion__iconWrapper"
       >
-        <div
-          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-        >
-          <div
-            class="euiFlexItem euiFlexItem--flexGrowZero euiAccordion__iconWrapper"
-          >
-            <svg
-              class="euiIcon euiIcon--medium euiIcon-isLoading"
-              focusable="false"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
-            />
-          </div>
-          <div
-            class="euiFlexItem euiAccordion__buttonContent"
-          />
-        </div>
-      </button>
-    </div>
+        <svg
+          class="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
+          focusable="false"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        />
+      </span>
+      <span />
+    </button>
   </div>
   <div
     class="euiAccordion__childWrapper"
@@ -268,42 +196,32 @@ exports[`EuiAccordion props buttonContent is rendered 1`] = `
   class="euiAccordion"
 >
   <div
-    class="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+    class="euiAccordion__triggerWrapper"
   >
-    <div
-      class="euiFlexItem"
+    <button
+      aria-controls="2"
+      aria-expanded="false"
+      class="euiAccordion__button"
+      type="button"
     >
-      <button
-        aria-controls="2"
-        aria-expanded="false"
-        class="euiAccordion__button"
-        type="button"
+      <span
+        class="euiAccordion__iconWrapper"
       >
-        <div
-          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-        >
-          <div
-            class="euiFlexItem euiFlexItem--flexGrowZero euiAccordion__iconWrapper"
-          >
-            <svg
-              class="euiIcon euiIcon--medium euiIcon-isLoading"
-              focusable="false"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
-            />
-          </div>
-          <div
-            class="euiFlexItem euiAccordion__buttonContent"
-          >
-            <div>
-              Button content
-            </div>
-          </div>
+        <svg
+          class="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
+          focusable="false"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        />
+      </span>
+      <span>
+        <div>
+          Button content
         </div>
-      </button>
-    </div>
+      </span>
+    </button>
   </div>
   <div
     class="euiAccordion__childWrapper"
@@ -323,38 +241,30 @@ exports[`EuiAccordion props buttonContentClassName is rendered 1`] = `
   class="euiAccordion"
 >
   <div
-    class="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+    class="euiAccordion__triggerWrapper"
   >
-    <div
-      class="euiFlexItem"
+    <button
+      aria-controls="1"
+      aria-expanded="false"
+      class="euiAccordion__button"
+      type="button"
     >
-      <button
-        aria-controls="1"
-        aria-expanded="false"
-        class="euiAccordion__button"
-        type="button"
+      <span
+        class="euiAccordion__iconWrapper"
       >
-        <div
-          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-        >
-          <div
-            class="euiFlexItem euiFlexItem--flexGrowZero euiAccordion__iconWrapper"
-          >
-            <svg
-              class="euiIcon euiIcon--medium euiIcon-isLoading"
-              focusable="false"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
-            />
-          </div>
-          <div
-            class="euiFlexItem euiAccordion__buttonContent button content class name"
-          />
-        </div>
-      </button>
-    </div>
+        <svg
+          class="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
+          focusable="false"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        />
+      </span>
+      <span
+        class="button content class name"
+      />
+    </button>
   </div>
   <div
     class="euiAccordion__childWrapper"
@@ -374,40 +284,30 @@ exports[`EuiAccordion props extraAction is rendered 1`] = `
   class="euiAccordion"
 >
   <div
-    class="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+    class="euiAccordion__triggerWrapper"
   >
-    <div
-      class="euiFlexItem"
+    <button
+      aria-controls="3"
+      aria-expanded="false"
+      class="euiAccordion__button"
+      type="button"
     >
-      <button
-        aria-controls="3"
-        aria-expanded="false"
-        class="euiAccordion__button"
-        type="button"
+      <span
+        class="euiAccordion__iconWrapper"
       >
-        <div
-          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-        >
-          <div
-            class="euiFlexItem euiFlexItem--flexGrowZero euiAccordion__iconWrapper"
-          >
-            <svg
-              class="euiIcon euiIcon--medium euiIcon-isLoading"
-              focusable="false"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
-            />
-          </div>
-          <div
-            class="euiFlexItem euiAccordion__buttonContent"
-          />
-        </div>
-      </button>
-    </div>
+        <svg
+          class="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
+          focusable="false"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        />
+      </span>
+      <span />
+    </button>
     <div
-      class="euiFlexItem euiFlexItem--flexGrowZero"
+      class="euiAccordion__optionalAction"
     >
       <button>
         Extra action
@@ -432,38 +332,28 @@ exports[`EuiAccordion props initialIsOpen is rendered 1`] = `
   class="euiAccordion euiAccordion-isOpen"
 >
   <div
-    class="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+    class="euiAccordion__triggerWrapper"
   >
-    <div
-      class="euiFlexItem"
+    <button
+      aria-controls="4"
+      aria-expanded="true"
+      class="euiAccordion__button"
+      type="button"
     >
-      <button
-        aria-controls="4"
-        aria-expanded="true"
-        class="euiAccordion__button"
-        type="button"
+      <span
+        class="euiAccordion__iconWrapper"
       >
-        <div
-          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-        >
-          <div
-            class="euiFlexItem euiFlexItem--flexGrowZero euiAccordion__iconWrapper"
-          >
-            <svg
-              class="euiIcon euiIcon--medium euiIcon-isLoading"
-              focusable="false"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
-            />
-          </div>
-          <div
-            class="euiFlexItem euiAccordion__buttonContent"
-          />
-        </div>
-      </button>
-    </div>
+        <svg
+          class="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
+          focusable="false"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        />
+      </span>
+      <span />
+    </button>
   </div>
   <div
     class="euiAccordion__childWrapper"
diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss
index 539e1490e48..e27aa4c93cf 100644
--- a/src/components/accordion/_accordion.scss
+++ b/src/components/accordion/_accordion.scss
@@ -1,6 +1,15 @@
+.euiAccordion__triggerWrapper {
+  display: flex;
+  align-items: center;
+}
+
 .euiAccordion__button {
+  @include euiFontSize;
   text-align: left;
   width: 100%;
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
 
   &:hover {
     text-decoration: underline;
@@ -10,19 +19,32 @@
   &:focus {
     .euiAccordion__iconWrapper {
       @include euiFocusRing;
-
       color: $euiColorPrimary;
-      border-radius: $euiBorderRadius;
     }
   }
+}
+
+.euiAccordion__iconWrapper {
+  @include size($euiSize);
+  border-radius: $euiBorderRadius;
+  margin-right: $euiSizeS;
+  flex-shrink: 0;
+
+  // Nested to override EuiIcon
+  .euiAccordion__icon {
+    vertical-align: top;
+  }
+}
 
+.euiAccordion__optionalAction {
+  flex-shrink: 0;
 }
 
 .euiAccordion__childWrapper {
   visibility: hidden;
   height: 0;
   opacity: 0;
-  overflow-y: hidden;
+  overflow: hidden;
   transform: translatez(0);
   // sass-lint:disable-block indentation
   transition:
@@ -30,7 +52,6 @@
     opacity $euiAnimSpeedNormal $euiAnimSlightResistance;
 }
 
-
 $paddingSizes: (
   xs: $euiSizeXS,
   s: $euiSizeS,
@@ -41,7 +62,6 @@ $paddingSizes: (
 
 // Create button modifiders based upon the map.
 @each $name, $size in $paddingSizes {
-
   .euiAccordion__padding--#{$name} {
     padding: $size;
   }
diff --git a/src/components/accordion/accordion.tsx b/src/components/accordion/accordion.tsx
index 18a5db4c7ff..65cefdaaaa8 100644
--- a/src/components/accordion/accordion.tsx
+++ b/src/components/accordion/accordion.tsx
@@ -4,7 +4,6 @@ import classNames from 'classnames';
 import { CommonProps, keysOf } from '../common';
 
 import { EuiIcon } from '../icon';
-import { EuiFlexGroup, EuiFlexItem } from '../flex';
 import { EuiMutationObserver } from '../observer/mutation_observer';
 import { getDurationAndPerformOnFrame } from '../../services';
 
@@ -144,48 +143,37 @@ export class EuiAccordion extends Component<
 
     const buttonClasses = classNames('euiAccordion__button', buttonClassName);
 
-    const buttonContentClasses = classNames(
-      'euiAccordion__buttonContent',
-      buttonContentClassName
-    );
-
     const icon = (
-      <EuiIcon type={this.state.isOpen ? 'arrowDown' : 'arrowRight'} size="m" />
+      <EuiIcon
+        className="euiAccordion__icon"
+        type={this.state.isOpen ? 'arrowDown' : 'arrowRight'}
+        size="m"
+      />
     );
 
     let optionalAction = null;
 
     if (extraAction) {
-      optionalAction = <EuiFlexItem grow={false}>{extraAction}</EuiFlexItem>;
+      optionalAction = (
+        <div className="euiAccordion__optionalAction">{extraAction}</div>
+      );
     }
 
     return (
       <div className={classes} {...rest}>
-        <EuiFlexGroup gutterSize="none" alignItems="center">
-          <EuiFlexItem>
-            <button
-              aria-controls={id}
-              aria-expanded={!!this.state.isOpen}
-              onClick={this.onToggle}
-              className={buttonClasses}
-              type="button">
-              <EuiFlexGroup
-                gutterSize="s"
-                alignItems="center"
-                responsive={false}>
-                <EuiFlexItem grow={false} className="euiAccordion__iconWrapper">
-                  {icon}
-                </EuiFlexItem>
-
-                <EuiFlexItem className={buttonContentClasses}>
-                  {buttonContent}
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </button>
-          </EuiFlexItem>
+        <div className="euiAccordion__triggerWrapper">
+          <button
+            aria-controls={id}
+            aria-expanded={!!this.state.isOpen}
+            onClick={this.onToggle}
+            className={buttonClasses}
+            type="button">
+            <span className="euiAccordion__iconWrapper">{icon}</span>
+            <span className={buttonContentClassName}>{buttonContent}</span>
+          </button>
 
           {optionalAction}
-        </EuiFlexGroup>
+        </div>
 
         <div
           className="euiAccordion__childWrapper"