title: Bootstrap, two responsive iframes, next to each other
body: <p>I would like to have a Twitch player with chat on my site. I need it to be responsive. I am working with Bootstrap.</p>
  
  <p>I have this code
  HTML:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-8 col-md-offset-1 nopadding"&gt;
                      &lt;div id="player"&gt;
                          &lt;div class="embed-responsive embed-responsive-16by9"&gt;
                              &lt;iframe class="player" src="https://player.twitch.tv/?volume=1&amp;channel=example&amp;autoplay=false" style="border: 0px; top:0px;" allowfullscreen&gt;&lt;/iframe&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-2 nopadding"&gt;
                      &lt;div id="chat"&gt;
                          &lt;div class="embed-responsive embed-responsive-16by9"&gt;
                              &lt;iframe class="chat" src="https://www.twitch.tv/example/chat?popout=" style="border: 0px;"&gt;&lt;/iframe&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-offset-1"&gt;&lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.nopadding {
  padding: 0 !important; }
  </code></pre>
  
  <p>I am using this CSS to remove the padding from grid, I need to have player and chat next to each other, without padding.</p>
  
  <p>The problem is that the chat is to small, exactly the height is too small. I can set the height in css, but this height won't change with the player's height. How can I fix that?</p>