I have this code:
There are two side-by-side iframes with the ratio shown in the link, I want it to keep that ratio in any screen size.
The first iframe is iframe2 and the second iframe is iframe 1.

```
<div class="box">
<iframe allow="camera; microphone; fullscreen; display-capture; autoplay" src="source 1" 
style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" 
marginheight="0px" marginwidth="0px" height="600px" width="300px" align="right" 
allowfullscreen> </iframe>
</div>

<div class="box">
<iframe src="source 2" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" 
frameborder="1" marginheight="0px" marginwidth="350px" height="600px" width="1033px" 
allowfullscreen></iframe>
</div>

[The ratio should also look like this no matter what the screen size is 1]
[1]: https://i.stack.imgur.com/H7D81.png

```

How to automatically adjust size of 2 side-by-side iframe using a this ratio?
I know a little about the CSS and i tried to use it but the iframes size not adjusting instead become a small square, whenever I tried to use the methods given from other questions
Can anyone help?