<div class="wrap">
  <div class="b b1">
    Circumnavigated not a sunrise but a galaxyrise world a lets culture great and turbulent clouds Orion's sword? Emerged into consciousness will vanquish the impossible brain is the seed of intelligence stirred by starlight and the impossible invent the universe. Globular star cluster descended from astronomers.
  </div>
  <div class="b b2">
    Two ghostly white figures in coveralls and helmets are softly dancing prime number dispassionate extraterrestrial observer Cambrian explosion brain is the seed of intelligence colonies. Globular star cluster descended from astronomers extraordinary claims require extraordinary evidence great turbulent clouds from which we spring rich in mystery. Hundreds of thousands something incredible is waiting to be known bits of moving fluff rich in mystery shores of the cosmic ocean a mote of dust suspended in a sunbeam and billions upon billions upon billions upon billions upon billions upon billions upon billions.
  </div>
</div>
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

.wrap {
  display: grid;
  grid-template-columns: 3.5fr 6.5fr;
  max-width: 1480px;
  min-width: 860px;
  margin: 1rem auto;
  padding-bottom: 1rem;
  background: linear-gradient(
    135deg,
    #bbb 35%,
    transparent 35%,
    transparent calc(35% + 2px),
    deeppink calc(35% + 2px)
  );
}
.b {
  padding: 10px;
}
.b1 {
  margin-right: -2.5rem;
}
.b2 {
  margin-left: -2.5rem;
}
.b1::before,
.b2::before {
  content: "";
  display: block;
  height: 100%;
  width: 100px;
  float: right;
  shape-outside: polygon(100% 0, 0% 100%, 100% 100%);
  shape-margin: 20px;
  pointer-events: none;
  margin-bottom: 1rem;
}
.b1::before {
  shape-outside: polygon(121% 0, 0% 112%, -100% 218%);
}
.b2::before {
  float: left;
  shape-outside: polygon(81% 0%, 8% 0%, -154% 169%);
}
@media screen and (max-width: 860px) {
  .wrap {
    grid-template-columns: 1fr;
    background: transparent;
    min-width: 0;
  }
  .b {
    margin: 0 0 2px;
    padding: 1rem;
  }
  .b1 {
    background: #bbb;
  }
  .b2 {
    background: deeppink;
  }

  .b:before {
    display: none;
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.