JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="wrap-svg" width="100%" height="250">
  <foreignObject id="fixed-panel">
    <svg>
      <rect x="0" y="0" width="100"/>
      <text x="10" y ="25">fixed width</text>
    </svg>
  </foreignObject>
  <foreignObject id="flex-panel">
    <svg>
       <rect x="0" y="0" width="100%"/>
       <text x="10" y ="25">variable width</text>
        </svg>
   </foreignObject>
        
</svg>

CSS

#fixed-panel, #flex-panel {
  width:100%;
  height: 100%;
}
#fixed-panel svg, #flex-panel svg {
  width:100%;
  fill:#333;
}
#fixed-panel rect, #flex-panel rect  {
  height:100%;
  rx:5; 
  ry:5;
}
#fixed-panel rect { fill:#fcc; }
#flex-panel { padding-left:100px; }
#flex-panel rect { fill:#cfc; }