How to make the SVG element stretch vertically just right?
<p>My problem is captured in the following fiddle: <a href="https://jsfiddle.net/byer5pfq/" rel="nofollow noreferrer">https://jsfiddle.net/byer5pfq/</a>
I'm trying to implement the rendering of mathematical expressions with pure html/css and I need the square root to stretch vertically depending on the argument - so I resorted to SVG for auto-stretching. However, when the argument of the square root is not tall enough, the SVG still stretches to 150px (<a href="https://stackoverflow.com/questions/36673974/why-does-100-equal-150-pixels">Why does 100% equal 150 pixels?</a>). I'm using a table because the table layout typically enables you to match content heights.</p>

<p>Any suggestions on how to accomplish our goal would be greatly appreciated!</p>

<pre><code>&lt;span class="equation" style="display:inline"&gt;
  &lt;table class="root" cellspacing="0"&gt;
    &lt;tr&gt;
          &lt;td&gt;
              &lt;svg class="root-symbol" viewBox="0 0 5 6.5" preserveAspectRatio="none"&gt;
                  &lt;text x="0" y="6.5" font-size="9px"&gt;&amp;#8730;&lt;/text&gt;
                &lt;/svg&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;span class="root-argument"&gt;
                  &lt;span class="variables"&gt;Ax&lt;/span&gt;
              &lt;/span&gt;
          &lt;/td&gt;
     &lt;/tr&gt;
  &lt;/table&gt;
&lt;/span&gt;

.equation {
  font-size: 30px;
}

svg {
  display: inline-block;
}

span.variables {
  vertical-align: middle;
}

span {
  display: inline-block;
  vertical-align: middle;
}

tr {
  margin: 0;
  padding: 0;
}

td {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

span.root-exponent {
  height: calc(70% + .6em);
  font-size: .6em;
  vertical-align: bottom;
  text-align: right;
  margin-right: -1em;
  width: 1em;
}

table.root {
  /*    position: relative; */
  display: inline-block;
  vertical-align: middle;
  border: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

svg.root-symbol {
  vertical-align: middle;
  width: .9em;
  height: 100%;  /* Need it to strech when .root-argument is tall!!! */
}

span.root-argument {
  margin-left: -1px;
  padding-top: .05em;
  /* Clearance for the bar */
  padding-left: .1em;
  /* A little space on the left */
  padding-right: .2em;
  /* A little more on the right */
  border-top: 0.073em solid black;
  /* that's the bar */
  height: 100%;
}
</code></pre>