more

src/Components/SignupPage/SignupPage.js

@@ -393,6 +393,7 @@ const SignupPage = () => {
             </div>
             <div className="radio-group-box">
               {signupRadioFields?.map((option, i) => (
+                <div className="signup-radio-container">
                   <Radio
                     onClick={handleChangeRadioInput}
                     value={option.value}
@@ -402,6 +403,7 @@ const SignupPage = () => {
                     activeRadioOption={activeRadioOption}
                     price={option.price}
                   />
+                </div>
               ))}
             </div>
           </div>

src/pageElements/Radio.js

@@ -17,7 +17,7 @@ const Radio = (props) => {
   const classOption = "option";
   console.log("value, activeRadioOption", value, activeRadioOption);
   return (
-    <div>
+    <div className="radio-container">
       <div
         className="radio-option-container"
         key={name}
@@ -35,12 +35,11 @@ const Radio = (props) => {
                   <div className="radio-price"> {`${price}`} </div>
                 </div>
               </div>
-
-              <div></div>
               <div className="radio-circle-lower">
                 <div className="radio-description-box">
-                  {" "}
-                  {`${description}`}{" "}
+                  {description.map((item) => {
+                    return <li>{item}</li>;
+                  })}
                 </div>
                 <div className="radio-description-box">{`${details}`} </div>
               </div>
@@ -59,7 +58,11 @@ const Radio = (props) => {
                 </div>
               </div>
               <div className="radio-circle-lower">
-                <div className="radio-description-box">{`${description}`} </div>
+                <div className="radio-description-box">
+                  {description.map((item) => {
+                    return <li>{item}</li>;
+                  })}
+                </div>
                 <div className="radio-description-box">{`${details}`} </div>
               </div>
             </div>

src/styles/signup.scss

@@ -119,10 +119,10 @@
 
 .radio-group-box {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   padding: 6px;
   width: 100%;
-  height: 300px;
+  height: 420px;
 }
 
 .select-plan-summary-box {
@@ -147,3 +147,8 @@
 .signup-option {
   width: 100% !important;
 }
+
+.signup-radio-container {
+  width: 350px;
+  height: 100%;
+}