How to right align a search bar - html

Question

how to right align the search bar ? I've tried everything nothing seems to work. I want the 'Transaction' title on the left of the card and search bar on the right of the card
this is my code
export default function ContactsCard(Rows) {
return (
<Card sx={{ minWidth: 900, minHeight: 1, }}>
<CardContent>
<Stack direction="row" alignItems="center" gap={1}>
<RuleIcon sx={{ color: "text.secondary" }} />
<Typography sx={{ fontSize: 16, fontWeight: 'bold' }} textAlign='start' color="text.secondary" gutterBottom>
Transactions
</Typography>
<SearchBar rows={rows} />
</Stack>
<DataGridHelper title='Contact' rows={Rows} columns={columns} />
</CardContent>
</Card>
);
}
this how my table looks like now

Answer 1

Try adding a wrapper to the icon and typography with display="flex" flexDirection="column" and justifyContent="space-between" in Stack
export default function ContactsCard(Rows) {
return (
<Card sx={{ minWidth: 900, minHeight: 1, }}>
<CardContent>
<Stack direction="row" alignItems="center" justifyContent="space-between" gap={1}>
<Box display="flex" flexDirection="column">
<RuleIcon sx={{ color: "text.secondary" }} />
<Typography sx={{ fontSize: 16, fontWeight: 'bold' }} textAlign='start' color="text.secondary" gutterBottom>
Transactions
</Typography>
</Box>
<SearchBar rows={rows} />
</Stack>
<DataGridHelper title='Contact' rows={Rows} columns={columns} />
</CardContent>
</Card>
);
}