Javascript 页面宽度过窄后垂直对齐响应SVG的最佳方法

我目前有两个SVG并排在一个页面上。我希望其中一个保持固定大小，但另一个可以根据需要进行缩放。我有这个工作

但是，一旦浏览器窗口足够窄，我希望两个SVG垂直对齐。这就是我被困的地方。我认为我可以根据窗口大小添加/删除一个类，并使用相应的css来调整布局，但我的尝试到目前为止都失败了

这是一把JS小提琴，展示了我的成就。

$（函数（）{
$（窗口）.on（'resize'，function（））{
var图表=$（“#右”）；
var container=chart.parent（）；
var targetWidth=container.width（）；
图表属性（“宽度”，目标宽度>300？300：目标宽度）
.attr（“高度”，目标宽度>300？300：目标宽度）
//在targetWidth<“n”的某个点，我要对齐
//垂直的
}).触发（“调整大小”）；
})

#leftEl{
宽度：300px；
位置：绝对位置；
}
#右包装{
左边距：300px；
}

---

这里是检查窗口大小的简单javascript版本。当窗口宽度小于900 px时，这被设置为触发if语句，但显然可以根据需要进行设置

width

在此处与

let

一起声明为仅此作用域的变量，因此您将无法访问此函数之外的

width

变量

window.addEventListener('resize', function( event ){

  // variable that tracks page width
  let width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

if (width < 900) {

    yourVariableNameHere.classList.remove('classNameToRemove');

}

});

window.addEventListener（'resize'，函数（事件）{
//跟踪页面宽度的变量
设width=Math.max（document.documentElement.clientWidth，window.innerWidth | | 0）；
如果（宽度<900）{
yourVariableNameHere.classList.remove（'classNameToRemove'）；
}
});

添加媒体查询并更改css

#leftEl{
宽度：300px；
位置：绝对位置；
}
#右包装{
左边距：300px；
}
@仅介质屏幕和（最大宽度：650px）{
#左撇子{
宽度：300px；
位置：相对位置；
}
#右包装{
左边距：0；
}
}