Cacher is the code snippet organizer for pro developers

<div class="container">
  <div class="content">Content</div>
  <div class="sidebar">Sidebar</div>
</div>

.container {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 61.07389%, transparent 61.07389%, transparent 62.25347%, rgba(102, 102, 255, 0.25) 62.25347%, rgba(179, 179, 255, 0.25));
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
  min-height: 500px;
}

.container:after {
  content: " ";
  display: block;
  clear: both;
}

.content {
  width: 61.07389%;
  float: left;
  margin-right: 1.17958%;
}

.sidebar {
  width: 37.74653%;
  float: right;
  margin-right: 0;
}

// ----
// libsass (v3.2.5)
// ----

@import "susy";
@import "breakpoint";

$susy: (
  columns: 1.618 1,
  gutters: 1/32,
  debug: (image: show)
);

.container {
  @include container;
  min-height: 500px;
}

.content {
  @include span(1 first);
}

.sidebar {
  @include span(1 last);
}

<div class="container">
  <div class="content">Content</div>
  <div class="sidebar">Sidebar</div>
</div>