JSFiddle - React, Tailwind, and code Playground

HTML

<div id="svgContainer">
  <svg viewBox="0 0 923 500">
     <g transform="translate(50,5)">
        <text text-anchor="end">
           <tspan></tspan>???</tspan>
           <tspan dy="1.2em" x="0">???</tspan>
           <tspan dy="1.2em" x="0">???</tspan>
        </text>
        <text dx="5">
           <tspan>A</tspan>
           <tspan dy="1.2em" x="5">B</tspan>
           <tspan dy="1.2em" x="5">C</tspan>
        </text>
     </g>
    
     <g transform="translate(150,5)">
        <text text-anchor="end">
           <tspan></tspan>???</tspan><tspan dy="1.2em" x="0">???</tspan><tspan dy="1.2em" x="0">???</tspan>
        </text>
        <text dx="5">
           <tspan>A</tspan><tspan dy="1.2em" x="5">B</tspan><tspan dy="1.2em" x="5">C</tspan>
        </text>
     </g>
     
  </svg>
</div>

CSS

#svgContainer
{
  height: 500px;
  width: 800px;
}

#svgContainer svg
{
  width: 100%;
  height: 100%;
}