RESULT SUMMARY COMPONENT USING DISPLAY PROPERTY

Congratulations well done. A few tips to fix some of the issues

/* change this */
<p class="red"> <img src="assets/images/icon-reaction.svg"> Reaction <em><strong>80</strong> / 100</em>

</p>

/* to this */
<div class="red"> 
<div class="img-p">
<img src="assets/images/icon-reaction.svg"> 
<p>Reaction</p>
</div>  
<p class="score">80 <span>/ 100</span></p>
</div>


### CSS###
.red{
color: hsl(0, 100%, 67%);
background-color: hsla(0, 100%, 67%, 0.1);
width: 220px;
height: 30px;
padding: 0 5px;
padding-bottom: 10px;
}


### class red modified ###
.red{
color: hsl(0, 100%, 67%);
background-color: hsla(0, 100%, 67%, 0.1);
width: 220px;
height: 30px;
padding: 0 10px;
/*   padding-bottom: 10px; */
display: flex;
justify-content: space-between;
align-items: center
}


.img-p {
display: flex;
gap: 5px;
}

.score {
color: black;
}

span {
color: gray;
}

It's not good practice to wrap things around a p tag. It's best to use a div. Use flexbox to align everything inside those score boxes.