.code-side-note {
  position: static;
}
@media (min-width: 992px) {
  .code-side-note {
    position: absolute;
  }

  .code-side-note h5 {
    display: flex;
  }

  .code-side-note h5 .badge {
    margin-left: 10px;
  }

  .code-side-note h5:after {
    content: '';
    flex: 1 1 0;
    width: 100%;
    background: #cccccc;
    height: 1px;
    z-index: 2;
    margin-top: 11px;
    margin-left: 20px;
    margin-right: -30px;
  }

  .code-with-notes .c + span {
    position: relative
  }

  .code-with-notes .c + span:before {
    content: '';
    width: 100px;
    height: 1px;
    background: #cccccc;
    position: absolute;
    left: -115px;
    top: 8px;
  } 

  /* Remove the line from the Minus button button */
  .na + .s + .nt + .c + span.nt:before {
    display: none;
  }

  .code-side-note-data-ajax-cart-section {
    position: relative;
    &:after {
      content: '';
      background: #cccccc;
      height: 1px;
      z-index: 2;
      width: 30px;
      top: 45px;
      right: -45px;
      position: absolute;
    }
  }

  .code-side-note--p {
    &:after {
      content: '';
      background: #cccccc;
      height: 1px;
      z-index: 2;
      width: 30px;
      top: 13px;
      right: -30px;
      position: absolute;
    }
  }
}

.guide-row {
  margin: 24px -15px;
  display: flex;
  flex-wrap: wrap;

  > * {
    padding: 0 15px;
    flex: 0 0 100%;
    max-width: 100%;

    > h3:first-child,
    > h4:first-child,
    > h5:first-child {
      margin-top: 0;
    }

    &:last-child {
      margin-top: 16px;
    }
  }
}

@media (min-width: 992px) {
  .guide-row > *:last-child {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
    margin-top: 0;
  }

  .guide-row > *:first-child {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }

  .guide-row--50 > *:first-child,
  .guide-row--50 > *:last-child {
    flex: 0 0 50%;
    max-width: 50%;
  }
}