title: Auto Video Height on Columns
body: <p>I want to display two videos with different dimensions in the same row. I'm trying to automatically adjust the height so that there are no weird gaps (like in image 1).</p>
  <p>IMAGES: <a href="https://imgur.com/a/mK2nIKy" rel="nofollow noreferrer">https://imgur.com/a/mK2nIKy</a></p>
  <p>I've tried out things with flex display but with no success.
  My current set-up is:</p>
  <pre><code> &lt;div class=&quot;row&quot;&gt;
              &lt;div class=&quot;col-sm block-element-left&quot;&gt;
                  &lt;video class=&quot;rc&quot; autoplay=&quot;autoplay&quot; loop=&quot;loop&quot; muted=&quot;muted&quot; playsinline&gt;
                      &lt;source type=&quot;video/mp4&quot; src=&quot;video1.mp4&quot;&gt;
                  &lt;/video&gt;
              &lt;/div&gt;
  
              &lt;div class=&quot;col-sm block-element-right&quot;&gt;
                  &lt;video class=&quot;rc&quot; autoplay=&quot;autoplay&quot; loop=&quot;loop&quot; muted=&quot;muted&quot; playsinline&gt;
                      &lt;source type=&quot;video/mp4&quot; src=&quot;video2.mp4&quot;&gt;
                  &lt;/video&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  &lt;style&gt;
      .block-element-right {
          padding-left: 10px;   
      }
  
      .block-element-left {
          padding-right: 10px;   
      }
  
      .rc{
      -moz-border-radius:20px;
      border-radius:20px;
      overflow:hidden;
      cursor: pointer;
      z-index: -1;
      width: 100%;
      }
  
      .col-sm {
      padding: 0%;
      position: relative;
      }
  &lt;/style&gt;
  
  ```
  </code></pre>