<div class="grid">
  <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper, tellus vel imperdiet vestibulum, nunc nunc pulvinar velit, quis posuere odio diam eu augue.</div>
  <div class="item">Proin quis nulla enim. Vivamus condimentum gravida risus, vel euismod risus faucibus ut. Cras id interdum lorem. Etiam imperdiet, sem ac congue tincidunt, ipsum eros varius enim, in rhoncus nunc arcu id sem.</div>
  <div class="item long">Vestibulum luctus convallis mattis. Donec maximus ipsum non velit pellentesque, non blandit ex feugiat. Fusce hendrerit enim a orci sagittis, vitae ultrices ante rhoncus. Donec bibendum erat vel sapien luctus auctor. Mauris scelerisque dignissim justo, dapibus dictum nunc malesuada quis. Curabitur aliquet magna eget nisl commodo sagittis. Aenean et pellentesque mi, eget gravida dolor.</div>
  <div class="item">
    <img src="https://picsum.photos/200/100">Curabitur scelerisque sapien quis erat venenatis, et congue ex pretium. Donec iaculis sagittis imperdiet.</div>
  <div class="item long">Morbi et orci consectetur augue lacinia malesuada. Vestibulum aliquam ante nec orci tempor, eu molestie nunc egestas. Phasellus id volutpat eros. Sed et ullamcorper lacus. Nullam egestas eleifend mi ac feugiat. Praesent at augue tempor, malesuada elit vitae, pellentesque urna. Nullam blandit est in odio commodo, sed finibus turpis posuere. Maecenas nibh lectus, suscipit id porta et, elementum in mauris. Suspendisse eleifend, purus vel vestibulum commodo, lacus elit auctor eros, nec luctus diam ante vel odio.</div>
  <div class="item">Aliquam in sem sagittis, elementum ipsum quis, eleifend risus. Vestibulum eu porttitor nunc, ut scelerisque sapien. Pellentesque felis odio, rhoncus in euismod et, suscipit ultricies lacus. Pellentesque dapibus varius interdum. Quisque hendrerit libero nunc, eu scelerisque libero interdum ac.</div>
</div>
:root {
  --background-color: #e4eaf0;
  --border-color: #369894;
  --border-size: 3px;
}

body {
  font-family: arial;
  font-size: 14px;
  margin: 2em;
  background: var(--background-color);
}

.grid {
  background: var(--border-color);
  border: var(--border-size) solid var(--border-color);
  display: grid;
  gap: var(--border-size);
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, auto);
}

.item {
  background: var(--background-color);
  padding: 1em;
  line-height: 2;
}

.item.long {
  grid-column: span 2;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.