Client and Subsidary UI alignment

src/components/CreateProject/ProjectClientDetails.tsx

@@ -115,6 +115,8 @@ const ProjectClientDetails: React.FC<Props> = ({
     if (selectedCustomerId !== undefined) {
       fetchCustomer(selectedCustomerId).then(
         ({ contacts, subsidiaryIds, customer }) => {
+          console.log(contacts)
+          console.log(subsidiaryIds)
           setCustomerContacts(contacts);
           setCustomerSubsidiaryIds(subsidiaryIds);
           setValue(
@@ -433,7 +435,7 @@ const ProjectClientDetails: React.FC<Props> = ({
                 }}
               />
             </Grid>
-            <Grid item sx={{ display: { xs: "none", sm: "block" } }} />
+            {/* <Grid item sx={{ display: { xs: "none", sm: "block" } }} /> */}
             <Grid item xs={6}>
               <ControlledAutoComplete
                 control={control}
@@ -446,9 +448,21 @@ const ProjectClientDetails: React.FC<Props> = ({
                 }}
               />
             </Grid>
+            </Grid>
             <Grid item sx={{ display: { xs: "none", sm: "block" } }} />
             {customerContacts.length > 0 && (
-              <>
+              <Box>
+              <Stack
+                direction="row"
+                alignItems="center"
+                marginBlockEnd={1}
+                spacing={2}
+              >
+                <Typography variant="overline" display="block">
+                  {t("Subsidiary Details")}
+                </Typography>
+              </Stack>
+              <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
                 <Grid item xs={6}>
                   <ControlledAutoComplete
                     control={control}
@@ -519,9 +533,10 @@ const ProjectClientDetails: React.FC<Props> = ({
                     value={selectedCustomerContact?.email || ""}
                   />
                 </Grid>
-              </>
+                </Grid>
+              </Box>
             )}
-          </Grid>
+          {/* </Grid> */}
         </Box>
         {/* <CardActions sx={{ justifyContent: "flex-end" }}>
           <Button variant="text" startIcon={<RestartAlt />}>