From f2f1019ed1a4055c45bd4aba7efd6324b2b9d6e2 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <muhammed@freecodecamp.org>
Date: Tue, 22 Aug 2023 15:20:30 +0300
Subject: [PATCH] feat: remove unique case of col component (#51323)

---
 client/src/pages/update-email.css | 10 ++++++++--
 client/src/pages/update-email.tsx | 24 ++++++++----------------
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/client/src/pages/update-email.css b/client/src/pages/update-email.css
index 2ed904728f8..70334293bbb 100644
--- a/client/src/pages/update-email.css
+++ b/client/src/pages/update-email.css
@@ -1,3 +1,9 @@
-.control-label.email-label {
-  text-align: left;
+.update-email-field {
+  display: flex;
+  gap: 1em;
+  align-items: center;
+}
+
+.update-email-field label {
+  margin-bottom: unset;
 }
diff --git a/client/src/pages/update-email.tsx b/client/src/pages/update-email.tsx
index 4ef44d9325a..67e9e494abd 100644
--- a/client/src/pages/update-email.tsx
+++ b/client/src/pages/update-email.tsx
@@ -78,25 +78,17 @@ function UpdateEmail({ isNewEmail, t, updateMyEmail }: UpdateEmailProps) {
             <Row>
               <form onSubmit={handleSubmit}>
                 <FormGroup
+                  className='update-email-field'
                   controlId='emailInput'
                   validationState={getEmailValidationState()}
                 >
-                  <Col
-                    className='email-label'
-                    // TODO
-                    componentClass={ControlLabel as unknown}
-                    sm={2}
-                  >
-                    {t('misc.email')}
-                  </Col>
-                  <Col sm={10}>
-                    <FormControl
-                      onChange={onChange}
-                      placeholder='camperbot@example.com'
-                      required={true}
-                      type='email'
-                    />
-                  </Col>
+                  <ControlLabel>{t('misc.email')}</ControlLabel>
+                  <FormControl
+                    onChange={onChange}
+                    placeholder='camperbot@example.com'
+                    required={true}
+                    type='email'
+                  />
                 </FormGroup>
                 <Button
                   block={true}