jQuery full width / percantages

Adapted from http://stackoverflow.com/questions/8446061/jquery-masonry-with-percentage-width/10990011#10990011

HTML

<script src="https://npmcdn.com/masonry-layout@4.0.0/dist/masonry.pkgd.min.js"></script>
<script src="https://npmcdn.com/imagesloaded@4.1.0/imagesloaded.pkgd.min.js"></script>
	<div id="boxes" class="masonry clearfix">
    <div class="column-sizer"></div>
		<div class="box box-fw" style="background: cyan;">
			<div class="inner">
			<p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
			</div>
		</div>
		<div class="box" style="background: magenta;">
			<div class="inner">
			<p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
			</div>
		</div>
		<div class="box" style="background: yellow;">
			<div class="inner">
			<p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
			</div>
		</div>
		<div class="box" style="background: grey;">
			<div class="inner">
			<p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
			</div>
		</div>
	</div>

CSS

html,
body {
  margin: 0;
}
.box,
.column-sizer {
  width: 50%;
  box-sizing: border-box;
}
.box-fw {
  width: 100%;
}

JavaScript

$(function() {
  var container = $('#boxes');

  container.imagesLoaded(function() {
    //console.log( "Images loaded!" );
    container.masonry({
      itemSelector: '.box',
      columnWidth: '.column-sizer',
      isAnimated: true
    });
  });
});