Align the checkbox and the label

bigbluebutton-html5/imports/ui/components/waiting-users/component.jsx

@@ -216,10 +216,10 @@ const WaitingUsers = (props) => {
             ))
           }
         </div>
-        <div>
-          <label htmlFor="remiderUsersId" className={styles.rememberContainer}>
-            <input id="remiderUsersId" type="checkbox" onChange={onCheckBoxChange} />
-            <p>{intl.formatMessage(intlMessages.rememberChoice)}</p>
+        <div className={styles.rememberContainer}>
+          <input id="rememderCheckboxId" type="checkbox" onChange={onCheckBoxChange} />
+          <label htmlFor="rememderCheckboxId">
+            {intl.formatMessage(intlMessages.rememberChoice)}
           </label>
         </div>
         {renderPendingUsers(

bigbluebutton-html5/imports/ui/components/waiting-users/styles.scss

@@ -153,20 +153,20 @@
   width: 100%;
 }
 
-.remenberContainer {
-  margin: 1rem 0;
+.rememberContainer {
+  margin: 1rem 1rem;
   height: 2rem;
   display: flex;
   align-items: center;
-  & > p {
+  & > label {
     height: fit-content;
     padding: 0;
     margin: 0;
-    margin-left: .5rem;
+    margin-left: .7rem;
 
     [dir="rtl"] & {
       margin: 0;
-      margin-right: .5rem;
+      margin-right: .7rem;
     }
   }
-}
\ No newline at end of file
+}