Modified w/ Wrap All

by Rey Den Nalasa

HTML

<h3>Perk Rule</h3>
<div class="perk">Test1</div>
<div class="perk">Test2</div>
<div class="perk">Test3</div>
<div class="selected">Selected Perks</div>

CSS

.new {
  background-color: pink;
  //width: 30%;
  float: right;
}

.selected {
  background-color: red;
  width: 70%;
}

.compiled {
  background-color: green;
}

JavaScript

jQuery(document).ready(function($) {
  $('.perk').prev('h3').addClass("perk").text("success");
  $(".perk").wrapAll("<div class='new' />");
  $('.new').css('width','30%');
  $(".new,.selected").wrapAll("<div class='compiled' />");
});