Cacher is the code snippet organizer for pro developers

<div class="container">
  <aside>
    <h2>Sidebar</h2>
  </aside>

  <main>
    <h1>Main</h1>
    <div class="nested-item">
      
      <div class="anchor">
        <div class="coupon-anchor">10% off</div>
      </div>
      <div class="couponcontent">coupon content</div>
      <div class="button">button</div>
    </div>
  </main>
</div>

/* FLUID PERCENTAGES  */
.nested-item {
  max-width: 100%;
  margin-left: 0;
  margin-right: auto;
  background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 88.88889%, transparent 88.88889%);
  background-size: 20.45455%;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
  outline: 1px solid orange;
}

.nested-item:after {
  content: " ";
  display: block;
  clear: both;
}

.anchor {
  width: 14.28571%;
  float: left;
  margin-right: 7.14286%;
  outline: 1px solid black;
}

.coupon-anchor {
  width: 100px;
  margin: 0 auto;
  height: 100px;
  background: red;
}

.couponcontent {
  width: 57.14286%;
  float: left;
  margin-right: 7.14286%;
  outline: 1px solid black;
}

.button {
  width: 14.28571%;
  float: right;
  margin-right: 0;
  outline: 1px solid black;
}

@media screen and (max-width: 500px) {
  .anchor,
  .couponcontent,
  .button {
    width: 100%;
    float: right;
    margin-right: 0;
  }
}

.container {
  max-width: 1140px;
}

aside {
  float: left;
  width: 220px;
}

main {
  float: left;
  width: 80%;
}

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

@import "susy";
/* FLUID PERCENTAGES  */
$susy: (
  flow: ltr,
  math: fluid,
  output: float,
  gutter-position: after,
  container: 1140px,
  container-position: center,
  columns: 12,
  gutters: .5,
  debug: (
    image: hide,
    color: rgba(#66f, .25),
    output: background,
    toggle: top right,
  )
);

$susy-inside: (
  flow: ltr,
  math: fluid,
  output: float,
  gutter-position: after,
  container: 100%,
  container-position: left,
  columns: 5,
  gutters: .125,
  debug: (
    image: show,
    color: rgba(red, .25),
    output: background,
    toggle: top right,
  )
);



// .container {
//   @include container;
// }

// main {
//   @include span(10 of 12 last);
//   outline: 1px solid red;
//   height: 1000px;
// }

.nested-item {
  // @include span(8 of 10);
  @include container($susy-inside);
  outline: 1px solid orange;
}

.anchor {
  @include span(1 of 5);
  outline: 1px solid black;
}

.coupon-anchor {
  width: 100px;
  margin: 0 auto;
  height: 100px;
  background: red;
}

.couponcontent {
  @include span(3 of 5);
  outline: 1px solid black;
  
}

.button {
  @include span(1 of 5 last);
  outline: 1px solid black;
}



.anchor,
.couponcontent,
.button {
  @media screen and (max-width: 500px) {
    @include span(5 of 5 last);
  }
}



// aside {
//   @include span(2 of 12);
//   //width: 220px;
//   height: 1000px;
//   outline: 1px solid blue;
// }


.container {
  max-width: 1140px;
}

aside {
  float: left;
  width: 220px;
}

main {
  float: left;
  width: 80%;
}

<div class="container">
  <aside>
    <h2>Sidebar</h2>
  </aside>

  <main>
    <h1>Main</h1>
    <div class="nested-item">
      
      <div class="anchor">
        <div class="coupon-anchor">10% off</div>
      </div>
      <div class="couponcontent">coupon content</div>
      <div class="button">button</div>
    </div>
  </main>
</div>