I am struggling to align two buttons vertically on the right side. Here is my code snippet:
const WalletsContainer = () => {
return (
<Grid style={{ background: 'red' }} direction={'column'} alignItems={'flex-end'}>
<Grid xs={2}>
<CustomButton buttonText={t('add')} onClick={() => console.log('Add')} />
</Grid>
<Grid xs={2}>
<CustomButton buttonText={t('download')} onClick={() => console.log('Download')} />
</Grid>
</Grid>
);
};
Here is the output of the above code:
https://i.sstatic.net/lrhVT.png
The issue I am encountering is that the buttons are not aligned to the right as expected. According to the documentation, using alignItems={'flex-end'} should achieve the desired layout. Am I interpreting it incorrectly?