There are numerous style and semantic issues that need attention.
float should only be used to float elements within a text block, like an image in a newspaper article. It is not meant for design purposes or aligning elements next to each other!<br> is specifically for line breaks to move the next word/letter to a new line. It is not intended for creating spacings or for design purposes - use margins, padding, or gaps instead.- Using a
<p> tag for a single text block is more appropriate than using a div and breaking text with <br>s consecutively. Use multiple paragraphs when necessary.
- Avoid mixing inline styles with external CSS for better organization.
Focusing on the issue:
When translating paragraph by paragraph, consider using a table for tabular data instead of structuring it differently. Here's an example:
.verse img {
height: 1em;
}
table {
width: 100%;
}
td {
width: 50%;
padding: 1em;
}
<h1>PSALM 1</h1>
<table>
<tr>
<td>Beatus vir qui non abiit in consilio imporium, et in via peccatorum non stetit, et in cathedra pestilentiae non sedit.</td>
<td>Blessed is he who does not walk in the counsel of the wicked, nor stand in the way of sinners, nor sit in the seat of scorners.</td>
</tr>
<tr>
<td>sed in lege Domini voluntas ejus, et in lege ejus meditabitur die ac nocte.</td>
<td>But his delight is in the law of the <img src="/images/THE LORD.png">, and on His law he meditates day and night.</td>
</tr>
<tr>
<td>Et erit tamquam lignum quod plantatum est secus decursus aquarum, quod fructum suum dabit in tempore suo: et folium ejus non defluet; et omnia quaecumque faciet prosperabuntur.</td>
<td>He will be like a tree planted near good waters; he will bring good fruit in his season, and everything he does will prosper</td>
</tr>
<tr>
<td>Non sic impii, non sic; sed tamquam pulvis quem projicit ventus a facie terrae.</td>
<td>Not so with the wicked! Not so... they are like chaff that the wind blows away.</td>
</tr>
<tr>
<td>Ideo non resurgent impii in judicio, neque peccatores in concilio justorum:</td>
<td>Therefore, the wicked will not stand in judgment, nor in the company of the just.</td>
</tr>
<tr>
<td>quoniam novit Dominus viam justorum, et inter imporium peribit.</td>
<td>For the <img src="/images/THE LORD.png"/> watches over the way of the just, but the way of the wicked leads to destruction.</td>
</tr>
</table>
An alternative visual approach could involve using CSS-Grid, although this might not be semantically correct, especially for screen-readers:
.verse img {
height: 1em;
}
section {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 2em;
}
<h1>PSALM 1</h1>
<section>
<p data-lang="latin">
Beatus vir qui non abiit in consilio imporium, et in via peccatorum non stetit, et in cathedra pestilentiae non sedit.
</p>
<p data-lang="english">
Blessed is he who does not walk in the counsel of the wicked, nor stand in the way of sinners, nor sit in the seat of scorners.
</p>
<p data-lang="latin">
sed in lege Domini voluntas ejus, et in lege ejus meditabitur die ac nocte.
</p>
<p data-lang="english">
But his delight is in the law of the <img src="/images/THE LORD.png">, and on His law he meditates day and night.
</p>
<p data-lang="latin">
Et erit tamquam lignum quod plantatum est secus decursus aquarum, quod fructum suum dabit in tempore suo: et folium ejus non defluet;
et omnia quaecumque faciet prosperabuntur.
</p>
<p data-lang="english">
He will be like a tree planted near good waters; he will bring good fruit in his season, and everything he does will prosper
</p>
<p data-lang="latin">
Non sic impii, non sic; sed tamquam pulvis quem projicit ventus a facie terrae.
</p>
<p data-lang="english">
Not so with the wicked! Not so... they are like chaff that the wind blows away.
</p>
<p data-lang="latin">
Ideo non resurgent impii in judicio, neque peccatores in concilio justorum:
</p>
<p data-lang="english">
Therefore, the wicked will not stand in judgment, nor in the company of the just.
</p>
<p data-lang="latin">
quoniam novit Dominus viam justorum, et inter imporium peribit.
</p>
<p data-lang="english">
For the <img src="/images/THE LORD.png"> watches over the way...
</p>
</section>