JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <svg id="not_working" viewBox="0 0 250 1200" preserveAspectRatio="xMidYMid meet">
        <symbol id="test_symbol1" preserveAspectRatio="xMidYMid meet" viewBox="0 0 250 1200">
            <path id="test_symbol_path" d="M 100 1200 L 100 0" />
            <text font-size="100" fill="red">
                <textPath text-anchor="middle" startoffset="50%" xlink:href="#test_symbol_path">Test</textPath>
            </text>
        </symbol>
        <use xlink:href="#test_symbol1" />
    </svg>
    <svg viewBox="0 0 250 1200" preserveAspectRatio="xMidYMid meet">
        <path id="test_text" d="M 100 1200 L 100 0" />
        <text font-size="100" fill="green">
            <textPath text-anchor="middle" startoffset="50%" xlink:href="#test_text">Test</textPath>
        </text>
    </svg>
</div>

CSS

div {
    height:200px;
    width: 200px;
    display: flex;
    flex:1;
    flex-direction: row;
    border: 1px solid red;
}
svg {
    border: 1px solid black;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 50%;
}