Does anyone have any ideas on how to make this embedded iframe from GolfAdvisor "responsive"?
Each line has a defined width. I'm trying to understand how to change this coding so it can be responsive but I'm getting confused.

I wanted to put the embedded iframe on the left side of the article with a written paragraph of text beside it. I've tried tables and divs but not understanding what to change I'm stuck. (I'm using free software called "sourcerer" to code in TinyMCE without the editor stripping out my coding. - {source}{source} tags)

{source}
<div class="row">
<div class="span3"><!-- GolfAdvisor.com badge start -->
<style> div#golfadvisor_b1 *{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}div#golfadvisor_b1{width:300px;height:100px}div#golfadvisor_b1 div{position:relative;width:300px;height:100px;background:#FAFAFA;border:1px solid #DCDCDC}div#golfadvisor_b1 div p#gavd{position:absolute;top:37px;left:15px;width:270px;padding:3px 0;margin:0;font-family:Roboto;font-weight:300;text-align:center;font-size:18px;color:#848584;line-height:24px;border-bottom:1px solid #E3E3E3;border-top:1px solid #E3E3E3}div#golfadvisor_b1 div p#gavr{position:absolute;top:75px;left:55px;padding:0;margin:0;font-family:Roboto;text-align:center;font-weight:400;font-size:12px;color:#62A7AE;line-height:16px}div#golfadvisor_b1 div img#gavla{position:absolute;top:10px;left:15px}div#golfadvisor_b1 div img#gavra{position:absolute;top:8px;right:10px} </style> <link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'> <script src="https://badge.golfadvisor.com/api/courses/badge/27963"></script> <div id="golfadvisor_b1"> <a href="https://www.golfadvisor.com/courses/27963-rivendell-golf-club/?utm_campaign=badge_1&utm_medium=website&utm_source=badges"; target="_blank"> <div> <img id="gavla" src="https://gav_static.s3.amazonaws.com/badges/ga-badge-logo.png"> <script type='text/javascript'> try { var d=window.golfadvisor_rb[27963]; if (d['reviews'] > 0) { document.write('<img id="gavra" src="https://golfnow.ugc.bazaarvoice.com/0079ga/' + d['rating'] +'/5/rating.png"><p id="gavd">This course is rated '+ d['rating'] + ' out of 5 </p><p id="gavr">Read all '+ d['reviews'] + ' Reviews / Write Review</p>'); } else { document.write('<img id="gavra" src="https://golfnow.ugc.bazaarvoice.com/0079ga/' + d['rating'] +'/5/rating.png"><p id="gavd">Be the first to review this course</p><p id="gavr" style="left:95px">Write a review today</p>'); } } catch (e) { document.write('<p id="gavd" style="">Write a review today!</p>'); } </script> <noscript> <p id="gavd" style="">Write a review today!</p> </noscript> </div> </a> </div>
<!-- GolfAdvisor.com badge end --></div>
<div class="span6">If you have enjoyed your day at Rivendell or if you have a comment, please visit Golf Advisor and write a review of the course.<br/>
Thank you for your business.</div>
</div>
{/source}

Screenshot attached x 2. First full screen. Second, webdeveloper in Firefox showing responsive overlap.

Scratching my head trying to figure out what to change. Any help from anyone would be appreciated.