HTML中不同字体大小的左/右对齐

我试图在我的HTML中有左对齐和右对齐。当字体大小相同时，它可以正常工作，但当字体大小不同时，它们不会对齐

。对{
浮动：对；
显示：内联
}
.左{
浮动：左；
字体大小：300%；
显示：内联
}

左对齐
右对齐

Flexbox可以做到这一点……但它需要一个包装器元素

。左{
字体大小：300%；
}
div{
宽度：90%；
保证金：1em自动；
显示器：flex；
证明内容：之间的空间；
对齐项目：柔性端；
底边：2倍纯色灰色；
}

左对齐
右对齐

您可以将flex box与

对齐项目：基线属性
div{
显示器：flex；
调整项目：基线；
证明内容：之间的空间；
填充：10px；
}
.左{
字体大小：300%；
}

左对齐
右对齐