如何对齐不同的反应组件？

Question

I want to achieve the given style.

Currently, I have

<Box display="flex" flexDirection="row" alignItems="center" width={1}>
<Box flexGrow="1">
    <Typography variant="h6">
        {subscription.PlanName}
        <Box
            px={1}
            py={0.5}
            color={"primary.contrastText"}
            className={classes.success}
            display="flex"
            alignItems="center"
            justifyContent="space-between"
        >
            {subscription.Status}
        </Box>
    </Typography>
    <Typography variant="caption" component="div">Purchased on: <b>{moment(subscription.StartDate).format("DD-MM-YYYY")}</b></Typography>
    <Typography variant="caption" component="div">Expiring on: <b>{moment(subscription.EndDate).format("DD-MM-YYYY")}</b></Typography>
</Box>
<Box>
    <Button
        variant="outlined"
        color="primary"
        onClick={Actions.openBillingDrawer}>
        UPDATE CREDITS
    </Button>
</Box>
<Box>
    <Button
        variant="contained"
        color="primary"
        onClick={Actions.openBillingDrawer}>
        UPGRADE PLAN
    </Button>
</Box>

Also, the UPDATE CREDITS button is different from which I am currently using. Please provide the correct button for that too.

Answer 1

it is not exactly your goal, but its a good place to start. You've got the right separation of boxes, right size of the green box and a iconButton:

<Box
  display="flex"
  flexDirection="row"
  alignItems="center"
  width={1}
  justifyContent="space-between"
>
  <Box>
    <Box display="flex" alignItems="flex-end" margin="5px 0">
      <Typography variant="h4" style={{ lineHeight: "0.8" }}>
        Basic Plan
      </Typography>
      <Box
        color="primary.contrastText"
        bgcolor="success.main"
        fontSize="8px"
        padding="2px 4px"
        marginLeft="6px"
      >
        ACTIVE
      </Box>
    </Box>
    <Typography variant="caption" component="div" color="textSecondary">
      Purchased on: <b>01-01-2020</b>
    </Typography>
    <Typography variant="caption" component="div" color="textSecondary">
      Expiring on: <b>02-02-2020</b>
    </Typography>
  </Box>
  <Box>
    <Button
      variant="outlined"
      color="primary"
      endIcon={<ArrowDropDownIcon />}
    >
      UPDATE CREDITS
    </Button>
    <Button variant="contained" color="primary">
      UPGRADE PLAN
    </Button>
  </Box>
</Box>