fix(ComponentDemo): add padding to align dropdown labels (#1706)

* fix(ComponentDemo): add padding to align dropdown labels

* fix(typo): use correct word

Co-authored-by: Jan Child <44503588+janchild@users.noreply.github.com>

Co-authored-by: Jan Child <44503588+janchild@users.noreply.github.com>
Co-authored-by: Alessandra Davila <aledavila@ibm.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

src/components/ComponentDemo/ComponentDemo.js

@@ -101,8 +101,8 @@ const ComponentDemo = ({ children, src, scope, noInline, components }) => {
             }
             initialSelectedItem="White"
             id="theme-variant"
-            label="Theme variant selection"
-            titleText="Theme variant selection"
+            label="Theme selector"
+            titleText="Theme selector"
             items={Object.keys(themes)}
             size="xl"
           />
@@ -111,10 +111,8 @@ const ComponentDemo = ({ children, src, scope, noInline, components }) => {
             light
             initialSelectedItem={components[0]}
             id="component-variant"
-            titleText={
-              childrenArray.length === 1 ? '' : 'Component variant selection'
-            }
-            label="Component variant selection"
+            titleText={childrenArray.length === 1 ? '' : 'Variant selector'}
+            label="Variant selector"
             items={components}
             size="xl"
             className={cx(variantDropdown, {

src/components/ComponentDemo/ComponentDemo.module.scss

@@ -256,6 +256,10 @@ fieldset.form-group:last-of-type {
   [class*='--list-box--light'][class*='--list-box--expanded'] {
     border-bottom-width: 1px;
   }
+
+  [class*='--label'] {
+    margin-left: 1rem;
+  }
 }
 
 .dropdownRow .variantDropdown {