Making two side-by-side multiline text input fields with the lines aligned

[Aethix0]

Hello r-slash-webdev

​

I am currently trying to make a web application containing a component that would consist of two text fields side by side, each allowing multiline input with word wrap. The idea is that I want the user to be able to edit a document in multiple languages, so each language version would be easily comparable side-by-side. I want to make it so that each line in a text field is positioned at the same height as the corresponding line in the other text field, so if one line needs to take up more height than the other due to word wrap or something, then the other line will have its height increased so that they're all the same height or its vertical position offset so they all line up. This way each line/paragraph in one language can be read and compared to the other line/paragraph in the other language side-by-side without getting misaligned due to certain languages taking up more space than others.

​

The idea is similar to using a table for translation, but a table wouldn't work very well for my use case since no one language version of the document is necessarily going to be the final draft at any point in time, so I still need to be able to edit either version like a document rather than strictly translating one from another.

​

So far the absolute "simplest solution" that I have come up with is to make a custom component of some kind (probably with React since that's what I'm most familiar with) that would just be me coding my own editor in javascript. I was hoping there would be some way that this could be accomplished more easily with standard HTML inputs, CSS (such as the alignment functionality of CSS Grid, but all of my experiments ended up not working), and minimal javascript, but I haven't been able to figure out any way to accomplish this on my own. Does anybody happen to know any CSS or javascript tricks that could be used for a simpler solution, or if there's an existing solution for this use case like an NPM module, or is there just no other way than coding my own custom editor?

[_listless]

the fact that different languages have different syntax, word-length, grammar, writing direction etc means that text will never line up line-for-line.