From d47de1d267ea4974ab2d35bdedada99eec98eaa9 Mon Sep 17 00:00:00 2001
From: Yahya Hafez <yhafez3@gmail.com>
Date: Mon, 17 Jul 2023 15:57:55 +0100
Subject: [PATCH] chore: address pr review

---
 .../react/src/components/Checkbox/index.tsx   | 24 +++++++++----------
 packages/styles/forms.css                     |  2 +-
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/react/src/components/Checkbox/index.tsx b/packages/react/src/components/Checkbox/index.tsx
index fa2bf6ba8..cd2489577 100644
--- a/packages/react/src/components/Checkbox/index.tsx
+++ b/packages/react/src/components/Checkbox/index.tsx
@@ -71,7 +71,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
     }
 
     return (
-      <>
+      <div className="Checkbox">
         <div className={classNames('Checkbox is--flex-row', className)}>
           <input
             id={id}
@@ -124,18 +124,18 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
               }
             }}
           />
-          {labelDescription && (
-            <span id={labelDescriptionId} className="Field__labelDescription">
-              {labelDescription}
-            </span>
-          )}
-          {error && (
-            <div id={errorId} className="Error">
-              {error}
-            </div>
-          )}
         </div>
-      </>
+        {labelDescription && (
+          <span id={labelDescriptionId} className="Field__labelDescription">
+            {labelDescription}
+          </span>
+        )}
+        {error && (
+          <div id={errorId} className="Error">
+            {error}
+          </div>
+        )}
+      </div>
     );
   }
 );
diff --git a/packages/styles/forms.css b/packages/styles/forms.css
index 2d834ec4e..6f6d85817 100644
--- a/packages/styles/forms.css
+++ b/packages/styles/forms.css
@@ -309,11 +309,11 @@ textarea.Field--has-error:focus:hover,
   border-radius: 3px;
   color: #333;
   margin-right: var(--space-half);
+  align-self: flex-start;
 }
 
 .Radio__overlay {
   border-radius: 50%;
-  align-self: flex-start;
 }
 
 .Radio__overlay svg,