diff --git a/packages/vue-components/src/__tests__/Panels.spec.js b/packages/vue-components/src/__tests__/Panels.spec.js
index 3f82ead9a9..93b7a82376 100644
--- a/packages/vue-components/src/__tests__/Panels.spec.js
+++ b/packages/vue-components/src/__tests__/Panels.spec.js
@@ -60,26 +60,6 @@ describe('NestedPanels', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
 
-  test('transition height is correctly calculated', async () => {
-    const wrapper = mount(NestedPanel, {
-      slots: {
-        header: 'test header',
-        default: 'Some panel content\nsome other text',
-      },
-      propsData: {
-        preload: true,
-      },
-      attachTo: document.body,
-    });
-    const panelElement = wrapper.element.querySelector('.card-collapse');
-    Object.defineProperty(panelElement, 'scrollHeight', { configurable: true, value: 10 });
-    const bottomSwitch = wrapper.element.querySelector('.card-body > .collapse-button');
-    bottomSwitch.style.marginBottom = '13px';
-    // click on header
-    await wrapper.find('div.card-header').trigger('click');
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
   test('should have span.anchor when id is present', async () => {
     const wrapper = mount(NestedPanel, {
       propsData: {
diff --git a/packages/vue-components/src/__tests__/__snapshots__/Panels.spec.js.snap b/packages/vue-components/src/__tests__/__snapshots__/Panels.spec.js.snap
index 713138fe3a..4798266ef2 100644
--- a/packages/vue-components/src/__tests__/__snapshots__/Panels.spec.js.snap
+++ b/packages/vue-components/src/__tests__/__snapshots__/Panels.spec.js.snap
@@ -146,15 +146,19 @@ exports[`NestedPanels should not show header after expand with expandHeaderless
          
         <!---->
          
-        <button
-          class="collapse-button btn btn-outline-secondary"
-          type="button"
+        <div
+          class="bottom-button-wrapper"
         >
-          <span
-            aria-hidden="true"
-            class="collapse-icon glyphicon glyphicon-menu-down opened"
-          />
-        </button>
+          <button
+            class="collapse-button btn btn-outline-secondary"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="collapse-icon glyphicon glyphicon-menu-down opened"
+            />
+          </button>
+        </div>
       </div>
        
       <hr
@@ -239,15 +243,19 @@ exports[`NestedPanels should show header after expand with expandHeaderless as f
          
         <!---->
          
-        <button
-          class="collapse-button btn btn-outline-secondary"
-          type="button"
+        <div
+          class="bottom-button-wrapper"
         >
-          <span
-            aria-hidden="true"
-            class="collapse-icon glyphicon glyphicon-menu-down opened"
-          />
-        </button>
+          <button
+            class="collapse-button btn btn-outline-secondary"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="collapse-icon glyphicon glyphicon-menu-down opened"
+            />
+          </button>
+        </div>
       </div>
        
       <hr
@@ -419,98 +427,3 @@ exports[`NestedPanels should show header when collapsed with expandHeaderless as
   </div>
 </div>
 `;
-
-exports[`NestedPanels transition height is correctly calculated 1`] = `
-<div
-  class="card-container"
->
-  <div
-    class="card expandable-card"
-  >
-    <div
-      class="card-header header-toggle bg-light"
-    >
-      <div
-        class="caret-wrapper"
-      >
-        <!---->
-      </div>
-       
-      <div
-        class="header-wrapper card-title bg-light"
-      >
-        test header
-      </div>
-       
-      <div
-        class="button-wrapper"
-      >
-        <button
-          class="collapse-button btn btn-outline-secondary"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="collapse-icon glyphicon glyphicon-menu-down opened"
-          />
-        </button>
-         
-        <button
-          class="close-button btn btn-outline-secondary"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="glyphicon glyphicon-remove"
-          />
-        </button>
-         
-        <button
-          class="popup-button btn btn-outline-secondary"
-          style="display: none;"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="glyphicon glyphicon-new-window"
-          />
-        </button>
-      </div>
-    </div>
-     
-    <div
-      class="card-collapse"
-      style="max-height: 23px;"
-    >
-      <div
-        class="card-body"
-      >
-        Some panel content
-some other text 
-        <!---->
-         
-        <button
-          class="collapse-button btn btn-outline-secondary"
-          style="margin-bottom: 13px;"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="collapse-icon glyphicon glyphicon-menu-down opened"
-          />
-        </button>
-      </div>
-       
-      <hr
-        style="display: none;"
-      />
-    </div>
-     
-    <transition-stub
-      name="peek-read-more-fade"
-    >
-      <!---->
-    </transition-stub>
-  </div>
-</div>
-`;
diff --git a/packages/vue-components/src/panels/NestedPanel.vue b/packages/vue-components/src/panels/NestedPanel.vue
index 7e9914e701..5044e505bd 100644
--- a/packages/vue-components/src/panels/NestedPanel.vue
+++ b/packages/vue-components/src/panels/NestedPanel.vue
@@ -92,11 +92,13 @@
             :fragment="fragment"
             @src-loaded="retrieverUpdateMaxHeight"
           />
-          <panel-switch
-            v-show="isExpandableCard && bottomSwitchBool"
-            :is-open="localExpanded"
-            @click.native.stop.prevent="toggle(true)"
-          />
+          <div class="bottom-button-wrapper">
+            <panel-switch
+              v-show="isExpandableCard && bottomSwitchBool"
+              :is-open="localExpanded"
+              @click.native.stop.prevent="toggle(true)"
+            />
+          </div>
         </div>
         <hr v-show="isSeamless" />
       </div>
@@ -283,13 +285,17 @@ export default {
         margin-top: 0 !important;
     }
 
-    .card-body > .collapse-button {
+    .bottom-button-wrapper {
+        padding-bottom: 13px;
         margin-bottom: 13px;
+    }
+
+    .bottom-button-wrapper > .collapse-button {
         margin-top: 5px;
         opacity: 0.2;
     }
 
-    .card-body > .collapse-button:hover {
+    .bottom-button-wrapper > .collapse-button:hover {
         opacity: 1;
     }
 
diff --git a/packages/vue-components/src/panels/PanelBase.js b/packages/vue-components/src/panels/PanelBase.js
index a307b6efef..1d3023f63f 100644
--- a/packages/vue-components/src/panels/PanelBase.js
+++ b/packages/vue-components/src/panels/PanelBase.js
@@ -166,7 +166,7 @@ export default {
       } else {
         // Expand panel
         this.$refs.panel.style.transition = 'max-height 0.5s ease-in-out';
-        this.$refs.panel.style.maxHeight = `${this.getMaxHeight()}px`;
+        this.$refs.panel.style.maxHeight = `${this.$refs.panel.scrollHeight}px`;
       }
 
       this.localExpanded = !this.localExpanded;
@@ -190,7 +190,7 @@ export default {
           DOM update (nextTick) before setting maxHeight for transition.
         */
         this.$nextTick(() => {
-          this.$refs.panel.style.maxHeight = `${this.getMaxHeight()}px`;
+          this.$refs.panel.style.maxHeight = `${this.$refs.panel.scrollHeight}px`;
         });
       });
     },
@@ -212,28 +212,7 @@ export default {
       }
 
       // For expansion transition to 'continue' after src is loaded.
-      this.$refs.panel.style.maxHeight = `${this.getMaxHeight()}px`;
-    },
-    getMaxHeight() {
-      if (!this.bottomSwitchBool) {
-        return this.$refs.panel.scrollHeight;
-      }
-      /*
-        Collapse button at bottom of panel's bottom margin is not included in panel's scrollHeight.
-
-        It's bottom margin is added to the maxHeight of the panel to enable a smooth transition.
-        Otherwise, there would be an instant transition when reaching the end of the panel content.
-       */
-      const bottomSwitch = document.querySelector('.card-body > .collapse-button');
-      if (bottomSwitch == null) {
-        return this.$refs.panel.scrollHeight;
-      }
-      const bottomSwitchStyle = window.getComputedStyle(bottomSwitch);
-      const bottomSwitchBottomMargin = parseFloat(bottomSwitchStyle.marginBottom);
-      if (Number.isNaN(bottomSwitchBottomMargin)) {
-        return this.$refs.panel.scrollHeight;
-      }
-      return this.$refs.panel.scrollHeight + bottomSwitchBottomMargin;
+      this.$refs.panel.style.maxHeight = `${this.$refs.panel.scrollHeight}px`;
     },
     initPanel() {
       this.$refs.panel.addEventListener('transitionend', (event) => {