Fix: Eligibility Confirm - Unnest explanatory-text-wrapper div

[machikoyasuda]

closes #2271

The problem: Vertical alignment of the We use the ... paragraph is off for both Desktop and Tablet.

The issue:

These two divs need to be siblings, not a parent/child relationship. Having a row justify-content-center inside another row justify-content-center is giving the paragraph in the child div a more padding left and right. The heading text and the paragraph text need to be siblings, not a parent/child.

This parent/child relationship was created in the base.html file that the confirm.html is based off of.

Since explanatory-text-wrapper is only used on this confirm.html page, I was able to safely change the base.html to fix the issue, and know that this is will only change the confirm page and not any other pages.

Test is by looking at all pages for other regressions, and testing the Confirm page in desktop and mobile

[github-actions]

Coverage report

This PR does not seem to contain any modification to coverable code.

[thekaveman]

@machikoyasuda just as a reminder if you're reviewing/smoke testing in prod:

Make sure your user agent string is overridden to cal-itp/benefits-smoke-test.

The problem: Vertical alignment of the We use the ... paragraph is off for both Desktop and Tablet.

Am I understanding that it is the left and right padding/margin around this paragraph (pushing it inwards) that is the issue? I think that is the horizontal alignment right?

[machikoyasuda]

@thekaveman Yeah you're right - the wording is off. The horizontal spacing is off, which is taking the divs out of vertical alignment. All the divs should all start from the same point along the blue line I added in the screenshots.