Results Summary Component using CSS Grid

Hi there, congrats on starting the journey on this field. For each summary category I would suggest to use flexbox for layouting. Here's how:

<div class="reaction" 
  style="
          display: flex; 
          justify-content: space-between; 
          align-items: center
   ">
    <div style="display: flex;">
        <img src="URL">
        <p>Reaction</p>  
    </div>
    <div>
        <div class="test-score"> 80 </div>
        <div class="test-percent"> / 100 </div>
    </div>
</div>

I divide the reaction children into 2 main elements and using display: flex and justify-content: space-between we would get a horizontally align elements with a space in-between. You can learn more about flexbox here.

Also, the icons is not showing up because you don't have it in the project repository. For typical scenario, we would create a folder called public or assets for storing images of any kind.

- /root <- project root directory 
   - /assets
       - /images <- store the images here 
   - index.html

Then you can use the image like this:

 <img src="/assets/images/some-icon.svg">

If you have any other questions, feel free to ask. I would be glad to help :)