Output two aligned protein or DNA sequences nicely on top of each other

Dash Python
1

They are both strings but of different lengths. There are “-”'s where there are gaps so they end up being the same length.

How can I output them on top of each other in slices of say 50 or even responsive using dbc components?

As of now, my only solution was to use style{ word-wrap: break-word} after I concatenated the strings but this results in one full sequence printed before the other.

---MQDRLFVSMEHPRALPETDLIKGAIVGAGAVGMAIAYSMLIQNTFDELVLVDIDRRKVEGEVMDLVHGIPFVEPSVVRAGTLADCRGVDVVVITAGARQREGETRLSLVQRNVEIFRGLIGEIMEHCPNAILLVVSNPVDVMTYVAMKLAGLPPSRVIGSGTVLDTARFRYLLAERLRVDPRSLHAYIIGEHGDSEVPVWSRANVAGAFLSEIEPAVGTPDDPAKMFEVFEHVKNAAYEIIERKGATSWAIGLATTQIVRAITRNQNRVLPVSVLMSGLHGI-EEVCLAYPAVLNRQGIDRLVKFSLSPGEEEQLQRSARVMRQTLDGIQF---- ..|.|..........|.. |...||.||||||.|.|.|.....|||.|||....|..||.|||.|| ||..|...| ||..||..||||.|..|.|..||||||..||.||||||..|||.|.|.|.|....||||||.|||||..||||..|....|..||..|.....||...|...|||.|..||.|||||||........|..|..||.|||....||.|| ..|.|..|..|...||..|||..|...||..|..|| .||.|||. MATLKDQLIYNLLKEEQTPQN---KITVVGVGAVGMACAISILMKDLADELALVDVIEDKLKGEMMDLQHG--------------------------------------SLFLRTPKI-------------------VSGKVDILTYVAWKISGFPKNRVIGSGCNLDSARFRYLMGERLGVHPLSCHGWVLGEHGDSSVPVWSGMNVAGVSLKTLHPDLGTDKDKEQWKEVHKQVVESAYEVIKLKGYTSWAIGLSVADLAESIMKNLRRVHPVSTMIKGLYGIKDDVFLSVPCILGQNGISDLVKVTLTSEEEARLKKSA----DTLWGIQKELQF Score=578

Those bars and periods near the middle I can do without.

My code:

alignments_html = html.Div([
            html.P(
                align_str_arr[i],
                style={
                    'word-wrap': 'break-word'
                }
            ) for i in range(len(align_str_arr))
        ])

where align_str_arr is a list of the concatenated strings as there could be more than one alignment of the two sequences.
In Javascript I would have

elements each containing about 50 characters from one sequence then alternate between sequence A and B.
Is there a nice Dash Python solution for this?