'Align two differently sized headers

I'd like to align two headers of different sizes (ex. h3 and h5) based on their bottom edge (of the word, not the div), so that it looks like a properly formatted, readable group of headers (like in a sentence). Right now, my code looks like this:

                        <Box
                            sx={{
                                display: 'flex',
                                alignItems: 'end'
                            }}
                        >
                            <Typography variant="h3"> Sam </Typography>
                            <Typography variant="h5" sx={{ color: '#C4CDD5' }}> Jack </Typography>
                        </Box>

I had thought using end for alignItems might help, but it produced this picture:

enter image description here

The only way I can think of doing this is to use paddingBottom for one of the headers until their bottom edges align. However, this is tedious and wouldn't work well if I wanted to change the font size. Is there a better way?

cssmaterial-ui


Solution 1:[1]

Use display: flex along with align-items: baseline.
More info

Solution 2:[2]

You could specify a smaller height for the h3 element so that their bottoms align together, this is what I would do

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mehul Lakhanpal
Solution 2 Aadhit Shanmugam

Related Questions