对齐两个不同大小的 headers

Question

我想根据它们的底部边缘（单词的底部边缘，而不是 div)，因此它看起来像是一个格式正确、可读的 headers 组（就像在一个句子中）。现在，我的代码如下所示：

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

我原以为 end 用于 alignItems 可能会有所帮助，但它产生了这张图片：

我能想到的唯一方法是对其中一个 headers 使用 paddingBottom，直到它们的底部边缘对齐。但是，这很乏味，如果我想更改字体大小，则效果不佳。有没有更好的方法？

Answer 1

您可以为 h3 元素指定较小的高度，以便它们的底部对齐在一起，这就是我要做的

Answer 2

使用 display: flex 和 align-items: baseline。
More info

对齐两个不同大小的 headers

Align two differently sized headers

css

material-ui