Pozycjonowanie dwóch ramek <iframe> obok siebie w jednym konterze

Witam, posiadam następującą strukturę HTML oraz CSS:

.tab-content {
    clear: both;
    overflow: hidden;
}
.desc-text-video {
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 800px;
}
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    margin-bottom: 40px;
}
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<div class="tab-content" style="display:block;">
 <div class="desc-text-video">
  <div class="video-wrapper">
   <iframe width="560" height="315" src="#" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
  </div>
  <div class="video-wrapper">
   <iframe width="560" height="315" src="#" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
  </div>
 </div>
</div>

Aktualnie wszystkie divy "video-wrapper" są wycentrowane względem "tab-content", i układają się pod sobą. Chciałbym zmienić układ elementów "video-wrapper" tak żeby układały się obok siebie dopóki jest miejsce w "tab-content", a jeżeli szerokość "tab-content" spadnie poniżej 800px, automatycznie się układały się pod sobą. Czy jest to możliwe do zrobienia w jak najbardziej responsywny sposób? Próbowałem wielu opcji, m.in. flexboxa czy floatów, aczkolwiek aktualnie przynosiło to marny skutek. Najwięcej problemów stwarza wysokość ramki którą mogę manipulować głównie za pomocą "padding-bottom" tak żeby ramka byłą responsywna. Gdyby ktoś widział tutaj jakiekolwiek rozwiązanie będę wdzięczny za pomoc. Dziękuję.