Restructure the HTML so that we can eliminate unnecessary white spaces at the bottom of cells.

Feature Summary

On the current experience, the HTML is a table that displays a row for every diff and in some cases there are white spaces in some cells, which show spaces that do not correctly represent the diff

In this example we see a chunk of white spaces after "Small roles" on the Right Hand Side:

Use Cases

• As a viewer of the Two-column Wikitext Diff diff on Desktop: I do not see white spaces under paragraphs that do not represent an edit.

Acceptance Criteria

• Update the CSS in core to maintain new structure.
• New CSS changes should not affect the UI in core.
• Update HTML layout it so that we can accommodate new designs.

Engineering - Proposed Layout

New Design:

In the new design screenshot, I added a rowspan=5 to the td on the left that displays the content "Dedet has been workin..." and also moved the CSS classes to the div. Ex <div class="diff-deletedline diff-side-deleted">

We can accomplish the new design by moving the CSS styles to the div elements (ex <td><div class="diff-deletedline diff-side-deleted">>Lorem ipsum ...</div></td>) from the td elements (<td class="diff-deletedline diff-side-deleted"><div>Lorem ipsum ...</div></td>).

We would also need to to introduced a new variable to the method TableFormatter::printWordDiff to determine the value of a rowspan attribute for the td that is going to expand across different rows so that it allows the opposite side to print cell without having to worry about aligning to the other side. We would need to look ahead to see how many cells below the cell being printed are empty.