Side by Side Stream and Chat

The output of the stream and chat has been altered a bit to allow for better placement of the shortcodes. However, there was nothing in any prior versions that would inhibit you from placing them side by side as shown here: http://evaclive.com/ (note this site is still using the prior version).

To make one go to the left and the other go to the right, you must wrap them each in their own div and then apply css rules to those divs.

For example, on the EVAC site, the player is in an 8 width column that is floated to the left, and the chat is in a 4 width column floated to the right. I purposely left out any styling on the items so that you can make them match your website without much conflicting styling.

<section id="stream">
    <div class="row">
      <div class="large-8 columns" style="padding-right: 0 !important;" id="streamwindow">
        <script type="text/javascript" src="http://evaclive.com/wp-content/plugins/twitch-tv-embed-suite/scripts/swfobject.js"></script>
<script type="text/javascript">
			var flashvars = {};
			flashvars.flashvars = "hostname=www.twitch.tv&channel=evac&auto_play=true&start_volume=25";
			var params = {};
			params.allowfullscreen = "true";
			params.allowscriptaccess = "always";
			params.bgcolor = "#000000";
			params.wmode = "window";
			var attributes = {};
			attributes.id = "live_embed_player_flash";
			swfobject.embedSWF("http://www.twitch.tv/widgets/live_embed_player.swf", "myAlternativeContent", "100%", "525", "9.0.0", "http://evaclive.com/wp-content/plugins/twitch-tv-embed-suite/scripts/expressInstall.swf", flashvars, params, attributes);
		</script>
<div id="player">
<div id="myAlternativeContent"><a href="http://www.twitchtv.com/evac"><img class="alignnone size-full wp-image-10" alt="no-flash" src="http://evaclive.com/wp-content/uploads/2013/08/offline_blue.png" /></a></div>
</div>       </div>
      <div class="large-4 columns" style="padding-left: 0 !important;" id="chatwindow">
          <div id="chat">
   <iframe frameborder="0" scrolling="no" id="chat_embed" src="http://twitch.tv/chat/embed?channel=evac&popout_chat=true" height="490" width="100%"></iframe>
 </div>
      </div>
      </div>
      <div class="row"><div class="large-12 columns" style="text-align: center; margin-top: 10px;"><button class="large button round" id="toggleChat">Show/Hide Chat</button></div></div>
    </section>

Each column is floated individually and also has a width set to it. Make sure you set floats properly. When defining a float it is best practice to also set a width, or the browser may not know what to do with it.

All About Floats.

Hope that helps.

https://wordpress.org/plugins/twitch-tv-embed-suite/