How to change the text selection order of flex items?

Question

The context: I have two versions of a single text, one in English and the other is a translation. It's my wish to display both side-by-side in two columns. However, as with every translation, some paragraphs are smaller or larger than the original text, and I want them to align, that is, to keep the first sentence of a paragraph aligned in both original and translation text:

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

However, due to the way the HTML page was constructed, I interlace the original and translated text in alternating paragraphs:

.container {
 display:flex;
 flex-wrap:wrap;
}
.container > p {
  flex-basis:50%;
  flex-grow:1;
}

<div class="container">
    <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>
</div>

So I used flex box in a container and set the paragraphs to flex-grow: 1; flex-basis: 50% to force two columns.

However, when I try to select the text to copy it from the rendered page, the cursor selects the two columns (following the structure). What I want is for the user to be able to select just either the English text or the translated text.

How could I do so?

Answer 1

Don't alternate the translation, put all the english then all the non-english. You can then rely on CSS grid instead of flexbox to create your layout:

.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>