Html 如何在重新调整浏览器宽度时自动重新计算边距

因此，我提出了一个示例，其中HTML中包含以下内容：

重点是我在上图中指出的两句话

如图所示，一个句子是“这是一个短句”，底部的一个基本上是一个较长的句子

现在我在css中设置短句子的边距，使其与底部的长句子对齐

因此，基于此示例，我想要实现的是基本上允许浏览器在调整浏览器宽度时重新计算边距。

现在，如果我稍微调整一下浏览器的宽度，我们会看到句子偏离了轨道，不再与底部句子对齐

如果原始对齐状态的左边距为45.3%，则每当调整浏览器宽度时，如何获得等效的

如果您能在这方面提供帮助，我将不胜感激

*{
保证金：0；
填充：0；
框大小：边框框；
}
html，正文{
身高：100%；
字号：1rem；
}
#容器{
显示器：flex；
宽度：100%；
}
#首先{
边框：1px纯黑；
边界半径：5px；
宽度：35%；
高度：90vh；
左边距：10px；
}
/*此处设置的句子的边距*/
#句子1{
左缘：45.3%；
}
#第二{
边框：1px纯黑；
边界半径：5px；
高度：90vh；
宽度：50%；
左边距：10px；
}

文件
这是一个简短的句子
这是一个很长的句子
Lorem ipsum dolor sit amet，是一位杰出的献身者。埃蒂亚姆·亨德雷特·夸姆和泰勒斯·帕苏尔。圣贤万岁，三要素调味品。这是我的宿命。这是一个很好的例子。不遵守大规，不遵守大规

您可以在其中添加另一个div，包装#句1和#句2。 然后使该div尽可能长，并右对齐所有内容

这应该起作用：

这是一个简短的句子
这是一个很长的句子
...

.wrapper{
显示器：flex；
宽度：最大含量；
弯曲方向：立柱；
对齐项目：柔性端；
}