Solved Sizing SVG icons properly

Hi, I was wondering if you could help me out with another part of the previous page I had asked about padding.

I have .svg icons designed by the same designer that did the proof in the corner of the box of each option. But I've noticed that when looking at them in different responsive states, sometimes they shrink to almost nothing (between 600px and 480px), and then other times like on the 768 ipad inspector width the chocolate icon becomes too big for it's box. I'm wondering if there's a better way to write the html or css.

http://www2.pcdc.net/~vscr/testing/find-my-coffee-taste-profile-aeropress/

And a similar thing happens with the icons on this page (the icons outgrow their space below 479, and shrink prior to that):

http://www2.pcdc.net/~vscr/testing/find-my-coffee-brewmethod/

I've used similar html (code module) and css for both, as they're very similar.

This is the html I used for the whole top box portion of the design (the title, icon, borders):



<div class="top-taste-box">
<div class="top-taste-row">
<div class="top-taste-one">
<h3 class="orange-text" style="letter-spacing: 1px; font-size: 1.5rem;">Fruity</h3>
</div>
<div class="top-taste-two">
<img class="alignnone size-full wp-image-780 fmc-brew-img" role="img" src="/wp-content/uploads/2020/03/fruity.svg" alt="Fruity" width="25px" height="auto"/>
</div>
</div>
</div>

Any help would be huge!

 

That worked, it ended up joining the boxes together, but that had to do with just adding padding to the mod to separate them. Works really nicely, thank you!