<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.