Two up displays two content blocks side by side.
<div class="c-two-up">
<div class="c-two-up__item">
Item 1
</div>
<div class="c-two-up__item">
Item 2
</div>
</div>
.c-two-up {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 20px;
}
.c-two-up__item {
min-height: 250px;
padding: 20px;
border: 1px solid gray;
}
.c-two-up {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 20px;
&__item {
min-height: 250px;
padding: 20px;
border: 1px solid gray;
}
}