上下文：我有一个文本的两个版本，一个是英语，另一个是翻译。我希望在两列中同时显示两者。但是，与每个翻译一样，某些段落比原始文本要小或大，我希望它们对齐，即在原始文本和翻译文本中保持段落的第一句对齐：
En Paragraph Translated Paragraph
Large en paragraph Shorter translation
with 3 with 2 lines
lines
Both are aligned At the top of the
Like this. paragraph
但是，由于HTML页面的构建方式，我将原始文本和翻译后的文本隔行插入段落中：
<p>Large en paragraph with 3 lines (English)</p>
<p>Shorter translation with 2 lines (Translation)</p>
<p>Both are aligned Like this. (English)</p>
<p>At the top of the paragraph (Translation)</p>
所以我在容器中使用了flex box并将段落设置为flex-grow: 1; flex-basis: 50%以强制两列。
但是，当我尝试选择文本以从呈现的页面复制文本时，光标会选择两列（紧随结构之后）。我想要的是用户能够只选择英文文本还是翻译的文本。
我该怎么办？
首先尝试按列划分文本，然后按各列中的段落进行拆分。可以通过“最小高度”属性进行垂直对齐。
body {
display: flex;
}
div {
flex-grow: 1;
flex-basis: 50%
}
p {
min-height: 80px;
}<body>
<div>
<p>Large en paragraph with 3 lines jhgvs dfhbs idufb sudhbh bdsfuyvbs odufyo iuyb (English)</p>
<p>Both are aligned Like this. (English)</p>
</div>
<div>
<p>Shorter translation with 2 lines (Translation)</p>
<p>At the top of the paragraph (Translation)</p>
</div>
</body>不要交替翻译，请全部用英语，然后再用所有非英语。然后，您可以依靠CSS网格而不是flexbox来创建布局：
.container {
display:grid;
width:300px;
grid-auto-columns:1fr;
grid-auto-flow:dense;
}
.container > * {
grid-column:1;
}
.container > .tr {
grid-column:2;
}<div class="container">
<p>Large en paragraph with 3 lines (English)</p>
<p>Both are aligned Like this. (English)</p>
<p class="tr">Shorter translation with 2 lines (Translation)</p>
<p class="tr">At the top of the paragraph (Translation)</p>
</div>