positioning element in mui grid system for a nextjs app

Question

I wanna position my card and I used position relative and absolute but I think it is not a good approach and Iwanna to put a divider below that contents according to the picture below but after adding the position will be changed. Can anyone help me to improve my styling?

here it is my code and I have seperate file for positioning

import { BzTypography } from "@/components/common";
import { BzArrowDownIcon } from "@/components/common/Icons/ArrowDown";
import { BzRatingIcon } from "@/components/common/Icons/Rating";
import { Box, Grid, IconButton } from "@mui/material";
import Image from "next/image";
import isaco from "../../../../public/images/isaco.png";
import { styles } from "./styles";
import { PzAboutStoreSectionProps } from "./types";
export const PzAboutStoreSection: React.FC<PzAboutStoreSectionProps> = () => {
  return (
    <Grid container direction="column" sx={styles.root}>
      <Grid item sx={styles.title}>
        درباره فروشگاه
        <IconButton sx={styles.iconButton}>
          <BzArrowDownIcon />
        </IconButton>
      </Grid>
      <Grid
        container
        justifyContent="flex-start"
        columnGap={2}
        rowGap={2}
        sx={styles.container}
      >
        <Grid
          container
          justifyContent="flex-end"
          alignItems="center"
          sx={styles.aboutStoreItem}
        >
          <Grid container sx={styles.topContainer}>
            <Grid item sx={styles.image}>
              <Image src={isaco} alt="isaco" width={92} height={92} />
            </Grid>
            <Grid item>
              <BzTypography sx={styles.productName}>
                {" "}
                نام فروشگاه دارای محصول
              </BzTypography>
              <IconButton sx={styles.iconButtonRating}>
                <BzRatingIcon />
              </IconButton>
              <BzTypography sx={styles.userNumbers}>۴</BzTypography>
              <BzTypography sx={styles.userSums}>
                (از مجموع ۱۰ کاربر)
              </BzTypography>
            </Grid>
          </Grid>
        </Grid>
        <Grid
          container
          justifyContent="flex-end"
          alignItems="center"
          sx={styles.aboutStoreItem2}
          p={3}
        >
          <BzTypography>نام فروشگاه</BzTypography>
          <Grid item>
            <BzTypography sx={styles.info}>نام فروشگاه</BzTypography>
          </Grid>
          <img width={92} height={92} src="https://picsum.photos/200" alt="" />
          <Grid container direction="column" p={3}></Grid>
        </Grid>
        <Box sx={styles.aboutStoreItem3}>Hi</Box>
      </Grid>
    </Grid>
  );
};

import { BzSxProps } from "@/theme/MUIWrapper";
import { BzColors } from "@/theme/colors";

export const styles: Record<
  | "root"
  | "title"
  | "topContainer"
  | "container"
  | "iconButtonArrow"
  | "iconButtonRating"
  | "iconButton"
  | "aboutStore"
  | "aboutStoreItem"
  | "aboutStoreItem2"
  | "info"
  | "image"
  | "productName"
  | "userNumbers"
  | "userSums"
  | "aboutStoreItem3",
  BzSxProps
> = {
  root: (theme) => ({
    textAlign: "left",
    position: "relative",
  }),
  topContainer: (theme) => ({
    maxWidth: "539px",
    maxHeight: "288px",
    justifyContent: "flex-start",
    alignItems: "center",
    position: "relative",
    padding: "28px 25px",
  }),
  image: (theme) => ({
    position: "absolute",
    top: "-40px",
  }),
  productName: (theme) => ({
    fontSize: theme.typography.subtitle1,
    color: BzColors.gray[800],
    position: "absolute",
    top: "-40px",
    left: "130px",
  }),
  title: (theme) => ({
    fontSize: theme.typography.h4,
    color: BzColors.gray[900],
  }),

  iconButtonArrow: (theme) => ({
    padding: "0",
    marginRight: "2px",
  }),
  iconButtonRating: (theme) => ({
    padding: "0",
    position: "absolute",
    left: "130px",
    top: "10px",
  }),
  iconButton: (theme) => ({
    padding: "0",
  }),
  userSums: (theme) => ({
    position: "absolute",
    left: "155px",
    top: "7px",
    fontSize: theme.typography.caption,
    color: BzColors.gray[700],
  }),
  userNumbers: (theme) => ({
    position: "absolute",
    fontSize: theme.typography.caption,
    left: "143px",
    top: "7px",
  }),
  aboutStore: (theme) => ({
    display: "flex",
    marginTop: "24px",
  }),
  aboutStoreItem: (theme) => ({
    width: "540px",
    textAlign: "left",
    backgroundColor: BzColors.gray[25],
    display: "flex",
    border: `1px solid ${BzColors.gray[300]}`,
    borderRadius: "4px",
  }),
  aboutStoreItem2: (theme) => ({
    width: "400px",
    textAlign: "left",
    backgroundColor: BzColors.gray[200],
  }),
  aboutStoreItem3: (theme) => ({
    width: "260px",
    textAlign: "left",
    backgroundColor: BzColors.gray[200],
  }),
  container: (theme) => ({
    marginTop: "24px",
  }),
  info: (theme) => ({
    marginRight: "8px",
    marginTop: "16px",
  }),
};

the content should be like this. enter image description here now it is look like this: enter image description here