diff --git a/css/src/components/details.css b/css/src/components/details.css
index c30a430..6c76aca 100644
--- a/css/src/components/details.css
+++ b/css/src/components/details.css
@@ -442,15 +442,6 @@
   max-width: 100%;
 }
 
-/**
- * Widths are set to 100% in the above rule, so single line text inputs
- * should get a max-width that resembles the width dictated by the default
- * size attribute.
- */
-.claro-details__content--vertical-tabs-item .form-element--type-text {
-  max-width: 31.25rem;
-}
-
 /**
  * Collapse processed for non-supporting browsers like IE or Edge.
  */
diff --git a/css/src/components/fieldset.css b/css/src/components/fieldset.css
index 1b46257..06f1979 100644
--- a/css/src/components/fieldset.css
+++ b/css/src/components/fieldset.css
@@ -52,7 +52,7 @@ _:-ms-fullscreen,
 .fieldset__legend--composite {
   float: none;
   width: auto;
-  margin-top: calc(var(--space-xs) / 2); /* 4px */
+  margin-top: 0; /* IE11 and Edge do not collapse this margin. Ideally this would be 4px */
   margin-bottom: calc(var(--space-xs) / 2); /* 4px */
   color: inherit;
   font-size: var(--font-size-s); /* 14px */
diff --git a/css/src/components/vertical-tabs.css b/css/src/components/vertical-tabs.css
index 3948e92..01274e5 100644
--- a/css/src/components/vertical-tabs.css
+++ b/css/src/components/vertical-tabs.css
@@ -28,26 +28,15 @@
  * Main wrapper of vertical tabs.
  * This wrapper div is added by JavaScript.
  */
-
 .vertical-tabs {
   margin-top: var(--vertical-tabs-margin-vertical);
   margin-bottom: var(--vertical-tabs-margin-vertical);
+  border-top: 1px solid transparent; /* Need to hide the pane wrapper clearfix's height */
 }
 
-@media screen and (min-width: 38em) {
-  .toolbar-tray-open:not(.toolbar-vertical) .vertical-tabs,
-  body:not(.toolbar-tray-open) .vertical-tabs {
-    display: flex;
-    align-items: stretch;
-    flex-direction: row;
-  }
-}
-
-@media screen and (min-width: 60em) {
+@media screen and (-ms-high-contrast: active) {
   .vertical-tabs {
-    display: flex;
-    align-items: stretch;
-    flex-direction: row;
+    border-color: transparent;
   }
 }
 
@@ -57,16 +46,16 @@
 .vertical-tabs__menu {
   position: relative;
   display: none;
-  flex: 0 0 var(--vertical-tabs-menu-width);
-  max-width: var(--vertical-tabs-menu-width);
+  width: var(--vertical-tabs-menu-width);
   margin: 0;
   padding-top: var(--vertical-tabs-menu-item-shadow-extraspace);
-  border-top: var(--vertical-tabs-menu-separator-size) solid transparent;
   color: var(--color-text);
   list-style: none;
+  float: left; /* LTR */
 }
 [dir="rtl"] .vertical-tabs__menu {
   margin: 0;
+  float: right;
 }
 
 @media screen and (min-width: 38em) {
@@ -83,7 +72,7 @@
 @media screen and (min-width: 56em) {
   .toolbar-tray-open:not(.toolbar-vertical) .vertical-tabs__menu,
   body:not(.toolbar-tray-open) .vertical-tabs__menu {
-    max-width: var(--vertical-tabs-menu-max-width);
+    width: var(--vertical-tabs-menu-max-width);
   }
 }
 
@@ -99,13 +88,7 @@
  */
 @media screen and (min-width: 71em) {
   .vertical-tabs__menu {
-    max-width: var(--vertical-tabs-menu-max-width);
-  }
-}
-
-@media screen and (-ms-high-contrast: active) {
-  .vertical-tabs__menu {
-    border-color: transparent;
+    width: var(--vertical-tabs-menu-max-width);
   }
 }
 
@@ -292,10 +275,8 @@
  * Wrapper of vertical tabs panes.
  */
 .vertical-tabs__items {
-  display: flex;
   margin-top: var(--vertical-tabs-margin-vertical);
   margin-bottom: var(--vertical-tabs-margin-vertical);
-  flex-direction: column;
   background-color: var(--color-white);
   color: var(--color-text);
   border: var(--vertical-tabs-border);
@@ -306,37 +287,81 @@
 
 /* This modifier is added by JavaScript. */
 .vertical-tabs__items--processed {
-  flex: 1 0 var(--vertical-tabs-pane-width);
   margin-top: 0;
   margin-bottom: 0;
   position: relative;
+  top: -1px; /* Need to hide the pane wrapper clearfix's height */
   z-index: 1;
 }
+/* This clearfix makes the pane wrapper at least as tall as the menu. */
+.vertical-tabs__items--processed::after {
+  content: '';
+  display: block;
+  clear: both;
+}
 
 @media screen and (min-width: 38em) {
   .js .toolbar-tray-open:not(.toolbar-vertical) .vertical-tabs__items--processed,
   .js body:not(.toolbar-tray-open) .vertical-tabs__items--processed {
+    margin-left: var(--vertical-tabs-menu-width); /* LTR */
     border-top-left-radius: 0; /* LTR */
   }
 
   .js[dir="rtl"] .toolbar-tray-open:not(.toolbar-vertical) .vertical-tabs__items--processed,
   .js[dir="rtl"] body:not(.toolbar-tray-open) .vertical-tabs__items--processed {
+    margin-right: var(--vertical-tabs-menu-width);
+    margin-left: 0;
     border-top-left-radius: var(--vertical-tabs-border-radius);
     border-top-right-radius: 0;
   }
 }
 
+/**
+ * If toolbar isn't vertical or is collapsed, this is the width where the menu
+ * wrapper's inherited 40% width is equal to 20rem.
+ */
+@media screen and (min-width: 56em) {
+  .js .toolbar-tray-open:not(.toolbar-vertical) .vertical-tabs__items--processed,
+  .js body:not(.toolbar-tray-open) .vertical-tabs__items--processed {
+    margin-left: var(--vertical-tabs-menu-max-width); /* LTR */
+  }
+
+  .js[dir="rtl"] .toolbar-tray-open:not(.toolbar-vertical) .vertical-tabs__items--processed,
+  .js[dir="rtl"] body:not(.toolbar-tray-open) .vertical-tabs__items--processed {
+    margin-left: 0;
+    margin-right: var(--vertical-tabs-menu-max-width);
+  }
+}
+
 @media screen and (min-width: 60em) {
   .js .vertical-tabs__items--processed {
+    margin-left: var(--vertical-tabs-menu-width); /* LTR */
     border-top-left-radius: 0; /* LTR */
   }
 
   .js[dir="rtl"] .vertical-tabs__items--processed {
+    margin-left: 0;
+    margin-right: var(--vertical-tabs-menu-width);
     border-top-left-radius: var(--vertical-tabs-border-radius);
     border-top-right-radius: 0;
   }
 }
 
+/**
+ * If toolbar is expanded and is vertical, this is the width where the menu
+ * wrapper's inherited 40% width is equal to 20rem.
+ */
+@media screen and (min-width: 71em) {
+  .js .vertical-tabs__items--processed {
+    margin-left: var(--vertical-tabs-menu-max-width); /* LTR */
+  }
+
+  .js[dir="rtl"] .vertical-tabs__items--processed {
+    margin-left: 0;
+    margin-right: var(--vertical-tabs-menu-max-width);
+  }
+}
+
 /**
  * The actual vertical tabs pane.
  *
@@ -364,6 +389,7 @@
   .js body:not(.toolbar-tray-open) .vertical-tabs__item {
     margin: 0;
     border: 0;
+    overflow: hidden;
   }
 
   .js .toolbar-tray-open:not(.toolbar-vertical) .vertical-tabs__item--first,
@@ -383,6 +409,7 @@
   .js .vertical-tabs__item {
     margin: 0;
     border: 0;
+    overflow: hidden;
   }
 
   .js .vertical-tabs__item--first,