Struggling to align a checkbox within a MUI card to the top right? It has been a challenge for me as well. Here is an image of my current layout https://i.sstatic.net/BwH9o.png. I really want that button to be placed in the top right corner, even when the window size changes.
Below is my existing code for creating these cards and the associated 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;
}