JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<div class="embed dw-widget container">
<div id="test">
</div>
</div>

<iframe style="border-width: 0px; height: 455.1px; width: 1110px;" src="https://dw.com/display/22/07/220718_v2_democracy_country_count_EN/220718_v2_democracy_country_count_EN.html" scrolling="no"></iframe>

CSS

iframe {
  width: 100%;
}

/*cotainer query approach*/
.my-container {
  container: container / inline-size;
  width: 100%;
}

#test {
  background-color: red;
  width: 100%;
  height: 100px;
}

/*tests for support*/
@supports (container-type: inline-size) {
  @container (min-width: 460px) {
  #test {
    background-color: blue
  }
  }   
  }
  
/* in case of failed test use media query instead*/
@supports not (container-type: inline-size) {
  
}