Responsive 2 Column Divs Not Working

We've tried every Responsive 2 Column Divs we could find, but they're not working. I've included some links below to ones we have tried. Any idea why they're not working? We just want to divs that will stack when the screen is made smaller. Thanks in advance!

http://jsfiddle.net/fkp8d/1/

<div class="group">
<div class="left">
    <p>tates enim officiis. Iste repudiandae illo nulla sed nam a ratione iure?</p>
</div>
  <div class="right">
    <img src="http://lorempixel.com/640/480/" alt="" />
  </div>
 </div>

<style>
.left {
    float: left;
    width: 50%;
}
.right {
    float: right;
    width: 50%;
}
img {
    max-width: 100%;
    height: auto;
}
.group:after {
    content:"";
    display: table;
    clear: both;
}
@media screen and (max-width: 480px) {
    .left, .right {
        float: none;
        width: auto;
    }
  } </style>

Also: http://jsfiddle.net/8YLXy/