Responsive SVG (same font-size) as inline-block

I write a manual were I explain what different cube values (1 to 6) mean.

So I have created the cubes as SVG and use the svg as inline in my html. My goal would be that the viewbox or the SVG is repsonsive without javascript. So when i change the font-size of p.para from 0.5rem to any other size. The cube should follow the text size.

I tried it with a <span> and without it.

Here the HTML code (the cube is just a rectangle)

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

p.para {
  text-align: justify!important;
  font-size: 0.5rem;
}

p.para span {
  display: inline-block; 
  width: 1rem; 
  height: 1rem;
}

p.para svg {
  height: 1rem;
  display: inline-block;
  position: relative;
  vertical-align: bottom;
}

<!-- language: lang-html -->

<p class="para">
  bla bla foo bar foobar bla bla
  <span>
    <svg viewBox="0 0 20 20" >
      <rect width="20" height="20" rx="5" 
      fill="blue" />
    </svg>
  </span>
  bla bla foo bar foobar bla bla.
  More text and even more text.
</p>

<!-- end snippet -->

At the moment the SVG has always the same size, and is not relative or responsive to the p font size.

Thanks to CBroe I was able to fix it.

And even the code is now simpler.

• I removed the child-selector >
• I removed the styling for the <svg> at all

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

p.para {
  text-align: justify!important;
  font-size: 3rem;
}

p.para span {
  display: inline-block; 
  width: 1em; 
  height: 1em;
}

<!-- language: lang-html -->

<p class="para">
  bla bla foo bar foobar bla bla
  <span>
    <svg viewBox="0 0 20 20" >
      <rect width="20" height="20" rx="5" 
      fill="blue" />
    </svg>
  </span>
  bla bla foo bar foobar bla bla.
  More text and even more text.
</p>

<!-- end snippet -->