I did something similar once, though without a translation. See here:
On Tue, 2012-01-17 at 00:02 -0500, TEI-L automatic digest system wrote:
> Date: Mon, 16 Jan 2012 19:18:34 +0000
> From: Martin Mueller <[log in to unmask]>
> Subject: a TEI to HTML question
> Content-Type: text/plain; charset="us-ascii"
> Content-Transfer-Encoding: quoted-printable
> I have a very practical question about two related TEI-to-html
> formatting p=
> roblems that I hope a lot of people have found good solutions to, and
> I'll =
> be grateful for advice.
> In the first case you have lines of verse encoded like
> <l xml:id=3D"sha-cor101062" n=3D"62"></l>
> You want to display the text with a line number every five or ten
> lines, pu=
> tting that line number on the left side or on the right side in such a
> way =
> that it right-alines on the screen.
> In the second case you have a poem and its translation. For every line
> of t=
> he original there is one line of translation. You want to display the
> two v=
> ersions side-by-side.
> I did quite a bit of that kind of thing a few years ago and used table
> with two cells. This works, and even I can write the appropriate code
> to d=
> o it. I understand that you're not supposed to use tables for that
> kind o=
> f thing anymore. But an hour's hunting around the Web didn't reveal
> g that would work better or as well, and in thumbing through the 700
> pages =
> of the CSS Cookbook (promising quick solutions to common CSS problems)
> I di=
> dn't see any discussion of this type of problem.
> I could imagine a TEI site that would offer practical advice on this
> kind o=
> f thing in a cookbook format.
> With thanks in advance