<div class="wrap3">
  <div class="b b1">Box 1</div>
  <div class="b b2">Box 2 Box 2 </div>
</div>
<div class="wrap3">
  <div class="b b1">Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 </div>
  <div class="b b2">Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 </div>
</div>
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

.wrap3 {
  display: grid;
  grid-template-columns: 3.5fr 6.5fr;
  gap: 4rem;
  max-width: 1280px;
  margin: 1rem auto;
  background: linear-gradient(
    135deg,
    gray 35%,
    transparent 35%,
    transparent calc(35% + 2px),
    deeppink calc(35% + 2px)
  );
}
.b {
  padding: 10px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.