Stretch a SVG image along the x-axis

I'm looking to stretch my SVG image along the horizontal axis, which is acting as a background for some HTML divs. It is a simple bar that takes up the middle third horizontally :

It must not move on the vertical, and when horizontal is stretched, the image also must stretch so that the bar takes up the middle third.

Currently if I stretch horizontally, it maintains its vertical position which is good, but the SVG does not take up a third but maintains its original width:

Here is the React code :

function BackgroundSVG() {

    let outerDiv = {
        position:"relative",
        border: "3px solid red",
    }

    let svgStyle = {
        position:"absolute",
        top:"0px",
        border: "3px solid pink",
        zIndex: -1,

        width: "100%",
        height: "200px"
    }
    return (
        <div style={outerDiv}>
            <div>Lorem ipsum .......</div>
            <svg style={svgStyle}
                 viewBox={`0 0 ${600} ${200} `}
                 xmlns="http://www.w3.org/2000/svg">
                <path d={`M ${200} ${100} H ${400}`} strokeWidth={12} stroke="blue"/>
            </svg>
        </div>
    );
}

Here is a code pen

https://codepen.io/oliverwatkins/pen/MWqWmQz

How do I stretch the image along the x-axis, while preserving things on the y-axis?

I have tried to play around with the widths and heights but that does not seem to work. I assume that if I keep width at 100% and height at a 200px that this would solve the problem.

Default preserveAspectRatio attribute value is xMidYMid meet
so that browser try to maintain image aspect ratio.

For stretching SVG image, we need to set
preserveAspectRatio="none"