diff --git a/modules/primer-buttons/README.md b/modules/primer-buttons/README.md
index 3ebbe61e..d828870d 100644
--- a/modules/primer-buttons/README.md
+++ b/modules/primer-buttons/README.md
@@ -223,12 +223,12 @@ Have a hankering for a series of buttons that are attached to one another? Wrap
 </div>
 ```
 
-Add `.BtnGroup-form` to `<form>`s within `.BtnGroup`s for proper spacing and rounded corners.
+Add `.BtnGroup-parent` to parent elements, like `<form>`s or `<details>`s, within `.BtnGroup`s for proper spacing and rounded corners.
 
 ```html
 <div class="BtnGroup">
   <button class="btn BtnGroup-item" type="button">Button</button>
-  <form class="BtnGroup-form">
+  <form class="BtnGroup-parent">
     <button class="btn BtnGroup-item" type="button">Button in a form</button>
   </form>
   <button class="btn BtnGroup-item" type="button">Button</button>
diff --git a/modules/primer-buttons/lib/button-group.scss b/modules/primer-buttons/lib/button-group.scss
index cd69a3a5..cc48308f 100644
--- a/modules/primer-buttons/lib/button-group.scss
+++ b/modules/primer-buttons/lib/button-group.scss
@@ -38,12 +38,14 @@
     border-right-width: 1px;
 
     + .BtnGroup-item,
+    + .BtnGroup-parent .BtnGroup-item,
     + .BtnGroup-form .BtnGroup-item {
       border-left-width: 0;
     }
   }
 }
 
+.BtnGroup-parent,
 .BtnGroup-form {
   float: left;
 
@@ -72,6 +74,7 @@
     }
 
     + .BtnGroup-item,
+    + .BtnGroup-parent .BtnGroup-item,
     + .BtnGroup-form .BtnGroup-item {
       border-left-width: 0;
     }