Result Summary Component using simple HTML and CSS

How do I center both the divs of my main tag? The summary div is positioned in relative to the first div, so I was unable to center them both.

How to ensure both divs have the same height and width? I had to brute-force the paddings and margins to obtain the result.

A problem I encountered that I did not understand at all: A child span element did not receive the properties of the class that its parent p element had. Why did this happen? (Context: To couple the reaction icon with the word "reaction", I set them in a span but in doing so, the word "reaction" lost all properties of its parent p tag)