JSFiddle - React, Tailwind, and code Playground

HTML

<div>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="250px" height="400px" viewBox="0 0 250 400" enable-background="new 0 0 250 400" xml:space="preserve">
<rect x="0" y="0" fill="#FF0000" width="250" height="400"/>
<text transform="matrix(1 0 0 1 25 25)"><tspan x="0" y="0" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="12">my</tspan><tspan x="0" y="15" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="12">svg</tspan></text>
</svg>
<br />The height of the viewbox doesn't change!
</div>

CSS

div{
    width: 100%;
    height: 500px;
    background-color: #00ffff;
}

svg{
    width: 50%;
    background-color: #ffff00;
}

JavaScript

/*

Is there a way to change the size of the viewbox with CSS,
but preserve the aspect ratio? OR is there anotherway to
preserve the aspect ratio of the SVG without a view box.

Background:
I want to responsively adjust the size of the SVG, but
keep the aspect ratio.  The width of the viewbox adjusts
with the page, but the height doesn't adjust with the width.  

*/