fix alignment of Option with checkbox and description (#1267)

Author: jasonbasuil

src/Select/Option.jsx

@@ -17,14 +17,16 @@ import './Option.scss';
 const Option = forwardRef(({ indeterminate, ...props }, ref) => (
   <components.Option {...props}>
     <div className="Option">
-      <CheckboxButton
-        checked={props.isSelected}
-        className="Checkbox"
-        id={props.label}
-        indeterminate={indeterminate}
-        ref={ref}
-        onChange={() => null}
-      />
+      <div className="CheckboxContainer">
+        <CheckboxButton
+          checked={props.isSelected}
+          className="Checkbox"
+          id={props.label}
+          indeterminate={indeterminate}
+          ref={ref}
+          onChange={() => null}
+        />
+      </div>
       <div className="TitleDescriptionContainer">
         <label
           className={classNames({

src/Select/Option.scss

@@ -1,8 +1,8 @@
 .Option {
   display: flex;
-  align-items: center;
-
+  
   .Checkbox {
+    margin-top: var(--synth-spacing-1);
     margin-right: var(--synth-spacing-3);
   }