diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget.jsx
index 679c4530b..64ca5e2fa 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget.jsx
@@ -24,32 +24,32 @@ export const CollapsibleFormWidget = ({
   intl,
 }) => (
   <Collapsible.Advanced
-    className="collapsible-card rounded mx-4 my-3 p-4 text-primary-500"
+    className="collapsible-card rounded mx-4 my-3 px-4 text-primary-500"
     defaultOpen
     open={isError || undefined}
   >
     <Collapsible.Trigger
-      className="collapsible-trigger d-flex border-0 align-items-center"
+      className="collapsible-trigger d-flex border-0 align-items-center pt-4 p-0"
       style={{ justifyContent: 'unset' }}
     >
       <Collapsible.Visible whenClosed className="p-0 pb-3">
         <div className="d-flex flex-column flex-grow-1">
           <div className="d-flex flex-grow-1 w-75 x-small">{title}</div>
-          {subtitle ? <div className={`${fontSize} mt-3`}>{subtitle}</div> : null}
+          {subtitle ? <div className={`${fontSize} mb-4 mt-3`}>{subtitle}</div> : <div className="mb-4" />}
         </div>
         <div className="d-flex flex-row align-self-start">
           {isError && <Icon className="alert-icon" src={Info} />}
           <IconButton alt={intl.formatMessage(messages.expandAltText)} src={ExpandMore} iconAs={Icon} variant="dark" />
         </div>
       </Collapsible.Visible>
-      <Collapsible.Visible whenOpen className="p-0">
+      <Collapsible.Visible whenOpen>
         <div className="d-flex flex-grow-1 w-75 x-small">{title}</div>
         <div className="align-self-start">
           <IconButton alt={intl.formatMessage(messages.collapseAltText)} src={ExpandLess} iconAs={Icon} variant="dark" />
         </div>
       </Collapsible.Visible>
     </Collapsible.Trigger>
-    <Collapsible.Body className={`collapsible-body rounded px-0 ${fontSize}`}>
+    <Collapsible.Body className={`collapsible-body rounded px-0 ${fontSize} pb-4`}>
       {children}
     </Collapsible.Body>
   </Collapsible.Advanced>
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.jsx
index 7d248e370..f33ee83cc 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.jsx
@@ -31,16 +31,16 @@ export const LicenseDetails = ({
   updateField,
 }) => (
   level !== LicenseLevel.course && details && license !== 'select' ? (
-    <div className="x-small border-primary-100 border-bottom m-0">
+    <div className="x-small border-primary-100 border-bottom m-0 pr-1">
       <Form.Group className="pb-2">
         <div className="mb-3">
           <FormattedMessage {...messages.detailsSubsectionTitle} />
         </div>
-
         {license === LicenseTypes.allRightsReserved ? (
-          <FormattedMessage {...messages.allRightsReservedSectionMessage} />
+          <div className="mt-2">
+            <FormattedMessage {...messages.allRightsReservedSectionMessage} />
+          </div>
         ) : null}
-
         {license === LicenseTypes.creativeCommons
           ? (
             <Stack gap={4}>
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.jsx
index 632303531..0eab68191 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.jsx
@@ -7,6 +7,7 @@ import {
   intlShape,
 } from '@edx/frontend-platform/i18n';
 import {
+  ActionRow,
   Form,
   Icon,
   IconButtonWithTooltip,
@@ -31,10 +32,11 @@ export const LicenseSelector = ({
   const onLicenseChange = hooks.onSelectLicense({ dispatch: useDispatch() });
   const ref = React.useRef();
   return (
-    <Form.Group className="mx-2 my-0">
-      <Form.Row className="flex-nowrap">
+    <>
+      <ActionRow>
         <Form.Control
           as="select"
+          className="w-100 m-0 p-0"
           ref={ref}
           defaultValue={license}
           disabled={level === LicenseLevel.course}
@@ -48,21 +50,24 @@ export const LicenseSelector = ({
           })}
         </Form.Control>
         {level !== LicenseLevel.course ? (
-          <IconButtonWithTooltip
-            iconAs={Icon}
-            src={Delete}
-            onClick={() => {
-              ref.current.value = courseLicenseType;
-              updateField({ licenseType: '', licenseDetails: {} });
-            }}
-            tooltipPlacement="top"
-            tooltipContent={<FormattedMessage {...messages.deleteLicenseSelection} />}
-          />
+          <>
+            <ActionRow.Spacer />
+            <IconButtonWithTooltip
+              iconAs={Icon}
+              src={Delete}
+              onClick={() => {
+                ref.current.value = courseLicenseType;
+                updateField({ licenseType: '', licenseDetails: {} });
+              }}
+              tooltipPlacement="top"
+              tooltipContent={<FormattedMessage {...messages.deleteLicenseSelection} />}
+            />
+          </>
         ) : null }
-      </Form.Row>
+      </ActionRow>
       <div className="x-small mt-3">{levelDescription}</div>
-      {license === LicenseTypes.select ? null : <div className="border-primary-100 mt-4 border-bottom" />}
-    </Form.Group>
+      {license === LicenseTypes.select ? null : <div className="border-primary-100 mt-3 border-bottom" />}
+    </>
   );
 };
 
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseDetails.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseDetails.test.jsx.snap
index 63083c1e8..1f3a92277 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseDetails.test.jsx.snap
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseDetails.test.jsx.snap
@@ -4,7 +4,7 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with default pr
 
 exports[`LicenseDetails snapshots snapshots: renders as expected with level set to block and license set to Creative Commons 1`] = `
 <div
-  className="x-small border-primary-100 border-bottom m-0"
+  className="x-small border-primary-100 border-bottom m-0 pr-1"
 >
   <Form.Group
     className="pb-2"
@@ -152,7 +152,7 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
 
 exports[`LicenseDetails snapshots snapshots: renders as expected with level set to block and license set to all rights reserved 1`] = `
 <div
-  className="x-small border-primary-100 border-bottom m-0"
+  className="x-small border-primary-100 border-bottom m-0 pr-1"
 >
   <Form.Group
     className="pb-2"
@@ -166,11 +166,15 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
         id="authoring.videoeditor.license.detailsSubsection.title"
       />
     </div>
-    <FormattedMessage
-      defaultMessage="You reserve all rights for your work."
-      description="All Rights Reserved section message"
-      id="authoring.videoeditor.license.allRightsReservedSectionMessage"
-    />
+    <div
+      className="mt-2"
+    >
+      <FormattedMessage
+        defaultMessage="You reserve all rights for your work."
+        description="All Rights Reserved section message"
+        id="authoring.videoeditor.license.allRightsReservedSectionMessage"
+      />
+    </div>
   </Form.Group>
 </div>
 `;
@@ -179,7 +183,7 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
 
 exports[`LicenseDetails snapshots snapshots: renders as expected with level set to library 1`] = `
 <div
-  className="x-small border-primary-100 border-bottom m-0"
+  className="x-small border-primary-100 border-bottom m-0 pr-1"
 >
   <Form.Group
     className="pb-2"
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseSelector.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseSelector.test.jsx.snap
index 4f2262ed2..ef1bf6e28 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseSelector.test.jsx.snap
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseSelector.test.jsx.snap
@@ -1,14 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`LicenseSelector snapshots snapshots: renders as expected with block level 1`] = `
-<Form.Group
-  className="mx-2 my-0"
->
-  <Form.Row
-    className="flex-nowrap"
-  >
+<Fragment>
+  <ActionRow>
     <Form.Control
       as="select"
+      className="w-100 m-0 p-0"
       defaultValue="all-rights-reserved"
       disabled={false}
       floatingLabel="License Type"
@@ -30,6 +27,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with block lev
         Creative Commons
       </option>
     </Form.Control>
+    <ActionRow.Spacer />
     <IconButtonWithTooltip
       iconAs="Icon"
       onClick={[Function]}
@@ -42,7 +40,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with block lev
       }
       tooltipPlacement="top"
     />
-  </Form.Row>
+  </ActionRow>
   <div
     className="x-small mt-3"
   >
@@ -53,20 +51,17 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with block lev
     />
   </div>
   <div
-    className="border-primary-100 mt-4 border-bottom"
+    className="border-primary-100 mt-3 border-bottom"
   />
-</Form.Group>
+</Fragment>
 `;
 
 exports[`LicenseSelector snapshots snapshots: renders as expected with default props 1`] = `
-<Form.Group
-  className="mx-2 my-0"
->
-  <Form.Row
-    className="flex-nowrap"
-  >
+<Fragment>
+  <ActionRow>
     <Form.Control
       as="select"
+      className="w-100 m-0 p-0"
       defaultValue="all-rights-reserved"
       disabled={true}
       floatingLabel="License Type"
@@ -88,7 +83,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with default p
         Creative Commons
       </option>
     </Form.Control>
-  </Form.Row>
+  </ActionRow>
   <div
     className="x-small mt-3"
   >
@@ -99,20 +94,17 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with default p
     />
   </div>
   <div
-    className="border-primary-100 mt-4 border-bottom"
+    className="border-primary-100 mt-3 border-bottom"
   />
-</Form.Group>
+</Fragment>
 `;
 
 exports[`LicenseSelector snapshots snapshots: renders as expected with library level 1`] = `
-<Form.Group
-  className="mx-2 my-0"
->
-  <Form.Row
-    className="flex-nowrap"
-  >
+<Fragment>
+  <ActionRow>
     <Form.Control
       as="select"
+      className="w-100 m-0 p-0"
       defaultValue="all-rights-reserved"
       disabled={false}
       floatingLabel="License Type"
@@ -134,6 +126,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with library l
         Creative Commons
       </option>
     </Form.Control>
+    <ActionRow.Spacer />
     <IconButtonWithTooltip
       iconAs="Icon"
       onClick={[Function]}
@@ -146,7 +139,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with library l
       }
       tooltipPlacement="top"
     />
-  </Form.Row>
+  </ActionRow>
   <div
     className="x-small mt-3"
   >
@@ -157,20 +150,17 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with library l
     />
   </div>
   <div
-    className="border-primary-100 mt-4 border-bottom"
+    className="border-primary-100 mt-3 border-bottom"
   />
-</Form.Group>
+</Fragment>
 `;
 
 exports[`LicenseSelector snapshots snapshots: renders as expected with no license 1`] = `
-<Form.Group
-  className="mx-2 my-0"
->
-  <Form.Row
-    className="flex-nowrap"
-  >
+<Fragment>
+  <ActionRow>
     <Form.Control
       as="select"
+      className="w-100 m-0 p-0"
       defaultValue=""
       disabled={true}
       floatingLabel="License Type"
@@ -192,7 +182,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with no licens
         Creative Commons
       </option>
     </Form.Control>
-  </Form.Row>
+  </ActionRow>
   <div
     className="x-small mt-3"
   >
@@ -203,7 +193,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with no licens
     />
   </div>
   <div
-    className="border-primary-100 mt-4 border-bottom"
+    className="border-primary-100 mt-3 border-bottom"
   />
-</Form.Group>
+</Fragment>
 `;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/LanguageSelector.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/LanguageSelector.jsx
index 7542f4605..acfe89e59 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/LanguageSelector.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/LanguageSelector.jsx
@@ -55,9 +55,14 @@ export const LanguageSelector = ({
     dispatch: useDispatch(), languageBeforeChange: localLang, setLocalLang, triggerupload: input.click,
   });
   return (
-    <div className="col col-11">
-      <Form.Group controlId={`selectLanguage-form-${index}`} className="mw-100">
-        <Form.Control as="select" aria-label={intl.formatMessage(messages.languageSelectLabel)} defaultValue={language} onChange={(e) => onLanguageChange(e)}>
+    <div className="col col-11 p-0">
+      <Form.Group controlId={`selectLanguage-form-${index}`} className="mw-100  m-0">
+        <Form.Control
+          as="select"
+          aria-label={intl.formatMessage(messages.languageSelectLabel)}
+          defaultValue={language}
+          onChange={(e) => onLanguageChange(e)}
+        >
           {Object.entries(videoTranscriptLanguages).map(([lang, text]) => {
             if (language === lang) { return (<option value={lang} selected>{text}</option>); }
             if (lang === 'placeholder') { return (<option hidden>{intl.formatMessage(messages.languageSelectPlaceholder)}</option>); }
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/Transcript.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/Transcript.jsx
index e984c53a1..7c6474dd0 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/Transcript.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/Transcript.jsx
@@ -4,8 +4,11 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
 import {
-  Card, Button, IconButton, Row,
+  Card,
+  Button,
+  IconButton,
   Icon,
+  ActionRow,
 } from '@edx/paragon';
 import { Delete } from '@edx/paragon/icons';
 
@@ -71,11 +74,12 @@ export const Transcript = ({
           </Card>
         )
         : (
-          <Row className="flex-nowrap">
+          <ActionRow>
             <LanguageSelector
               title={index}
               language={language}
             />
+            <ActionRow.Spacer />
             { language === '' ? (
               <IconButton
                 iconAs={Icon}
@@ -89,8 +93,7 @@ export const Transcript = ({
                 launchDeleteConfirmation={launchDeleteConfirmation}
               />
             )}
-          </Row>
-
+          </ActionRow>
         )}
     </>
   );
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/LanguageSelector.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/LanguageSelector.test.jsx.snap
index 27dafc467..76243493c 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/LanguageSelector.test.jsx.snap
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/LanguageSelector.test.jsx.snap
@@ -2,10 +2,10 @@
 
 exports[`LanguageSelector snapshot transcript option 1`] = `
 <div
-  className="col col-11"
+  className="col col-11 p-0"
 >
   <Form.Group
-    className="mw-100"
+    className="mw-100  m-0"
     controlId="selectLanguage-form-undefined"
   >
     <Form.Control
@@ -49,10 +49,10 @@ exports[`LanguageSelector snapshot transcript option 1`] = `
 
 exports[`LanguageSelector snapshots -- no transcripts no Open Languages, all should be disabled 1`] = `
 <div
-  className="col col-11"
+  className="col col-11 p-0"
 >
   <Form.Group
-    className="mw-100"
+    className="mw-100  m-0"
     controlId="selectLanguage-form-undefined"
   >
     <Form.Control
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/Transcript.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/Transcript.test.jsx.snap
index 313950356..0b11f894c 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/Transcript.test.jsx.snap
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/Transcript.test.jsx.snap
@@ -2,36 +2,34 @@
 
 exports[`Transcript Component component component snapshots: renders as expected with default props: dont show confirm delete 1`] = `
 <Fragment>
-  <Component
-    className="flex-nowrap"
-  >
+  <ActionRow>
     <LanguageSelector
       language="lAnG"
       title="sOmenUmBer"
     />
+    <ActionRow.Spacer />
     <TranscriptActionMenu
       index="sOmenUmBer"
       language="lAnG"
       launchDeleteConfirmation={[MockFunction launchDeleteConfirmation]}
     />
-  </Component>
+  </ActionRow>
 </Fragment>
 `;
 
 exports[`Transcript Component component component snapshots: renders as expected with default props: dont show confirm delete, language is blank so delete is shown instead of action menu 1`] = `
 <Fragment>
-  <Component
-    className="flex-nowrap"
-  >
+  <ActionRow>
     <LanguageSelector
       language=""
       title="sOmenUmBer"
     />
+    <ActionRow.Spacer />
     <IconButton
       iconAs="Icon"
       onClick={[Function]}
     />
-  </Component>
+  </ActionRow>
 </Fragment>
 `;
 
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/__snapshots__/index.test.jsx.snap
index 15b537b80..05b990032 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/__snapshots__/index.test.jsx.snap
@@ -63,7 +63,7 @@ exports[`VideoSourceWidget snapshots snapshots: renders as expected with default
       />
     </div>
     <Form.Row
-      className="mt-3.5 flex-nowrap"
+      className="mt-3.5 mx-0 flex-nowrap"
     >
       <Form.Control
         floatingLabel="Video URL"
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx
index 9138c41af..b2602f648 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx
@@ -86,7 +86,7 @@ export const VideoSourceWidget = ({
           <FormattedMessage {...messages.fallbackVideoMessage} />
         </div>
         {fallbackVideos.formValue.length > 0 ? fallbackVideos.formValue.map((videoUrl, index) => (
-          <Form.Row className="mt-3.5 flex-nowrap">
+          <Form.Row className="mt-3.5 mx-0 flex-nowrap">
             <Form.Control
               floatingLabel={intl.formatMessage(messages.fallbackVideoLabel)}
               onChange={fallbackVideos.onChange(index)}
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/__snapshots__/CollapsibleFormWidget.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/__snapshots__/CollapsibleFormWidget.test.jsx.snap
index 3802c4c90..c1115fa7c 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/__snapshots__/CollapsibleFormWidget.test.jsx.snap
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/__snapshots__/CollapsibleFormWidget.test.jsx.snap
@@ -2,11 +2,11 @@
 
 exports[`CollapsibleFormWidget render snapshots: renders as expected with default props 1`] = `
 <Advanced
-  className="collapsible-card rounded mx-4 my-3 p-4 text-primary-500"
+  className="collapsible-card rounded mx-4 my-3 px-4 text-primary-500"
   defaultOpen={true}
 >
   <Trigger
-    className="collapsible-trigger d-flex border-0 align-items-center"
+    className="collapsible-trigger d-flex border-0 align-items-center pt-4 p-0"
     style={
       Object {
         "justifyContent": "unset",
@@ -26,7 +26,7 @@ exports[`CollapsibleFormWidget render snapshots: renders as expected with defaul
           tiTLE
         </div>
         <div
-          className=" mt-3"
+          className=" mb-4 mt-3"
         >
           SuBTItle
         </div>
@@ -42,7 +42,6 @@ exports[`CollapsibleFormWidget render snapshots: renders as expected with defaul
       </div>
     </Visible>
     <Visible
-      className="p-0"
       whenOpen={true}
     >
       <div
@@ -62,7 +61,7 @@ exports[`CollapsibleFormWidget render snapshots: renders as expected with defaul
     </Visible>
   </Trigger>
   <Body
-    className="collapsible-body rounded px-0 "
+    className="collapsible-body rounded px-0  pb-4"
   >
     <p>
       Some test string
@@ -73,12 +72,12 @@ exports[`CollapsibleFormWidget render snapshots: renders as expected with defaul
 
 exports[`CollapsibleFormWidget render snapshots: renders with open={true} when there is error 1`] = `
 <Advanced
-  className="collapsible-card rounded mx-4 my-3 p-4 text-primary-500"
+  className="collapsible-card rounded mx-4 my-3 px-4 text-primary-500"
   defaultOpen={true}
   open={true}
 >
   <Trigger
-    className="collapsible-trigger d-flex border-0 align-items-center"
+    className="collapsible-trigger d-flex border-0 align-items-center pt-4 p-0"
     style={
       Object {
         "justifyContent": "unset",
@@ -98,7 +97,7 @@ exports[`CollapsibleFormWidget render snapshots: renders with open={true} when t
           tiTLE
         </div>
         <div
-          className=" mt-3"
+          className=" mb-4 mt-3"
         >
           SuBTItle
         </div>
@@ -117,7 +116,6 @@ exports[`CollapsibleFormWidget render snapshots: renders with open={true} when t
       </div>
     </Visible>
     <Visible
-      className="p-0"
       whenOpen={true}
     >
       <div
@@ -137,7 +135,7 @@ exports[`CollapsibleFormWidget render snapshots: renders with open={true} when t
     </Visible>
   </Trigger>
   <Body
-    className="collapsible-body rounded px-0 "
+    className="collapsible-body rounded px-0  pb-4"
   >
     <p>
       Some test string