I am trying to create a layout with 2 columns - a video on the left (with aspect ratio 16x9) and a sidebar on the right (with min-width). As the window width changes, I want the video to resize proportionally while the sidebar maintains its width.
However, I am puzzled by the presence of padding top for .ratio::before.
Codepen: https://codepen.io/yewzy/pen/PoOxLyO
Here is the code snippet:
<div class="container" id="main">
<div class="d-flex" id="row-main">
<div class="col-sm-9 col-12">
<div class="flex-grow-1" id="content">
<div class="ratio ratio-16x9">
<video id="vid"></video>
</div>
</div>
</div>
<div class="col-sm-3 col-12" id="sidebar">
<iframe class="chat"></iframe>
</div>