How can I show an axis smaller than the values in Victory charts?

Question

I want to achieve this with Victory charts:

I have this code so far, which results in the wanted design, but I cannot get this responsive, as I cannot find a way to scale and center the first axis responsiv:

        <VictoryChart>
            <VictoryAxis crossAxis
                         offsetY={40}
                         tickFormat={[]}
                         axisComponent={<LineSegment
                             style={{
                                 stroke: 'green',
                                 strokeWidth: 3,
                                 transform: "scale(0.8 1) translate(50 0)", // Will not work for other device sizes
                             }}
                         />}
            />
            <VictoryAxis crossAxis
                         tickValues={[0, 1, 2, 3, 4, 5, 6]}
                         tickFormat={[["Special", "First"], "", "", "valid values", "", "", ["Speical", "Last"]]}
                         tickLabelComponent={<VictoryLabel dy={10}/>}
                         axisComponent={<></>}
            />
            <VictoryBar
                data={chartData}
                barRatio={1}
                style={{
                    data: {fill: ({datum}) => datum.fill},
                }}
            />
        </VictoryChart>

What would be the correct way to go, to get this horizontal green line, starting from the second bar till the sixths bar?