Display protein sequence alignment without Dash Bio

Dash Python
1

I have a school project where we wrote the algorithm to align two protein sequences so I don’t want to use Dash Bio which has its own backend engine for alignment.

What I get as output from my engine are two lists, S1 and S2 for sequence 1 and sequence 2.
Each element in the list should be displayed one on top of the other so you can see where the alignments and gaps are. For example for s1 and s2 of “ATGGC”,“ACTG” respectively, (using nucleotides as an example), the engine will output:

#S1:
['A-TGGC', 'A-TGGC']
#S2:
['ACTG--', 'ACT-G-']

What I want is something like:

Alignment 1
A-TGGC
ACTG-

Alignment 2
A-TGGC
ACT-G-
.
.
.

I was thinking of using html.Pre() but am unsure how to process the two lists.
Maybe a <ul> with <li> elements?

Also there is a matrix that is a numpy ndarray that I want to show in another Div element.

[[ 0. -1. -2. -3. -4.]
 [-1.  3.  2.  1.  0.]
 [-2.  2.  2.  5.  4.]
 [-3.  1.  1.  4.  8.]
 [-4.  0.  0.  3.  7.]
 [-5. -1.  3.  2.  6.]]