Html 两个跨度元素的文本对齐

我希望span元素

#spl

和

#xspl

都能均匀、正确地对齐。请帮助使其看起来大小相等。 两者应相等并正确对齐。 应该是这样的：

#spl{
背景：棕色；
保证金：5px；
填充：5px0；
}
#xspl{
背景颜色：紫色；
保证金：5px；
填充：5px0；
}

你的指标
高度：
短
高的


薪金：
贫穷的
富有的

您可以通过给它们指定固定的

宽度来对齐它们


#spl{
背景：棕色；
保证金：5px；
填充：5px0；
}
#xspl{
背景颜色：紫色；
保证金：5px；
填充：5px0；
}
标签{
宽度：100px；
显示：内联块；
}
#spl，
#xspl，
输入{
显示：内联块；
垂直对齐：中间对齐；
}
#spl，
#xspl{
宽度：40px；
}

你的指标
高度：
短
高的


薪金：
贫穷的
富有的
从某种意义上讲，无论是矮的还是穷的，高的还是富的，都应该有相等的边距，并像一个完美的正方形一样对齐