Align Mui Card Action to the Top Right-CodePudding

I am trying to align a checkbox within a MUI card to the top right but have been struggling for a long time do so. This is an image of what I currently have. I would like the button to be aligned to the top right corner (dynamically aka when the window shrinks I still want the checkbox to be on the top right).

This is the code I currently have to create these cards as well as the styling

<Card
    key={index}
    variant="outlined"
    className="course card"
>
    <CardHeader
        title={
            <Typography
                className="course title"
                sx={{
                    fontFamily: "Computer Modern Sans, sans-serif",
                    color: "black"
                }}
            >
                {course}
            </Typography>
        }
    ></CardHeader>
    <CardActions disableSpacing>
        <Checkbox size="small" color="primary">
        </Checkbox>
    </CardActions>
</Card>


.course.card{
    margin-right: 1%;
    min-height: 100px;
    max-width: 25%;
    min-width: 20%;
    flex: 1 1 20%;
    border-radius: 15px;
    display:flex;
    justify-content: center;
    align-items: center;
}

CodePudding user response：

Since the Card does not have CardContent, perhaps try add flex: 1 for CardHeader to push CardActions to the right, and style CardActions to place the Checkbox to the top right corner.

Minimized example on: stackblitz

The padding in CardActions can be edited to further customize the position of Checkbox.

<Card key={index} variant="outlined" className="course card">
  <CardHeader
    sx={{
      display: "flex",
      flex: "1",
    }}
    title={
      <Typography
        className="course title"
        sx={{
          fontFamily: "Computer Modern Sans, sans-serif",
          color: "black",
          display: "flex",
          justifyContent: "center",
        }}
      >
        {course}
      </Typography>
    }
  ></CardHeader>
  <CardActions
    disableSpacing
    sx={{
      alignSelf: "stretch",
      display: "flex",
      justifyContent: "flex-end",
      alignItems: "flex-start",
      //