Fixed tooltip layout issues in horizontal forms for CheckboxGroup and RadioGroup

Author: kosuke-k

src/scripts/CheckboxGroup.tsx

@@ -117,19 +117,19 @@ export const CheckboxGroup = createFC<
         {...rprops}
         onChange={onChange}
       >
-        <div className='slds-grid slds-grid_vertical-align-center'>
-          <legend className='slds-form-element__label'>
-            {required ? (
-              <abbr className='slds-required' title='required'>
-                *
-              </abbr>
-            ) : undefined}
-            {label}
-          </legend>
+        <legend className='slds-form-element__label'>
+          {required ? (
+            <abbr className='slds-required' title='required'>
+              *
+            </abbr>
+          ) : undefined}
+          {label}
           {tooltip ? (
-            <TooltipContent icon={tooltipIcon}>{tooltip}</TooltipContent>
+            <span className='slds-m-left_x-small'>
+              <TooltipContent icon={tooltipIcon}>{tooltip}</TooltipContent>
+            </span>
           ) : null}
-        </div>
+        </legend>
         <div className='slds-form-element__control' ref={controlElRef}>
           <CheckboxGroupContext.Provider value={grpCtx}>
             {children}

src/scripts/RadioGroup.tsx

@@ -95,19 +95,19 @@ export const RadioGroup = createFC<RadioGroupProps, { isFormElement: boolean }>(
         style={grpStyles}
         {...rprops}
       >
-        <div className='slds-grid slds-grid_vertical-align-center'>
-          <legend className='slds-form-element__label'>
-            {required ? (
-              <abbr className='slds-required' title='required'>
-                *
-              </abbr>
-            ) : undefined}
-            {label}
-          </legend>
+        <legend className='slds-form-element__label'>
+          {required ? (
+            <abbr className='slds-required' title='required'>
+              *
+            </abbr>
+          ) : undefined}
+          {label}
           {tooltip ? (
-            <TooltipContent icon={tooltipIcon}>{tooltip}</TooltipContent>
+            <span className='slds-m-left_x-small'>
+              <TooltipContent icon={tooltipIcon}>{tooltip}</TooltipContent>
+            </span>
           ) : null}
-        </div>
+        </legend>
         <div className='slds-form-element__control'>
           <RadioGroupContext.Provider value={grpCtx}>
             {children}