<div class="wrapper">
  <div class="grid">
    <div class="col">
      <h3>Hello Word 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad magni similique, dolorem deleniti velit ducimus repellendus excepturi fugit maiores exercitationem, vitae dicta sed illo illum incidunt. Architecto magnam voluptatem necessitatibus iusto
        iste laboriosam, consequatur. Libero ut, autem tempora perferendis sapiente laborum illum voluptas dolore culpa similique, minima reprehenderit distinctio aut repellat! Culpa placeat, dolores repellat debitis quas possimus eligendi.</p>
    </div>
    <div class="col">
      <h3>Hello Word 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam iste aperiam ipsum, molestiae sunt nobis nam. Saepe, magnam qui ad, vitae, dolorum illum eos omnis blanditiis enim doloremque rem modi molestiae totam fugiat sit amet iure nihil,
        recusandae quaerat eveniet!</p>
    </div>
    <div class="col">
      <h3>Hello Word 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum distinctio, molestias facere. In, minus, nesciunt. Fugiat voluptatum itaque eaque ad iste asperiores, ipsam accusantium, eveniet nam sit expedita repudiandae quo.</p>
    </div>
    <div class="col">
      <h3>Hello Word 4</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad magni similique, dolorem deleniti velit ducimus repellendus excepturi fugit maiores exercitationem, vitae dicta sed illo illum incidunt. Architecto magnam voluptatem necessitatibus iusto
        iste laboriosam, consequatur. Libero ut, autem tempora perferendis sapiente laborum illum voluptas dolore culpa similique, minima reprehenderit distinctio aut repellat! Culpa placeat, dolores repellat debitis quas possimus eligendi.</p>
    </div>
    <div class="col">
      <h3>Hello Word 5</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam iste aperiam ipsum, molestiae sunt nobis nam. Saepe, magnam qui ad, vitae, dolorum illum eos omnis blanditiis enim doloremque rem modi molestiae totam fugiat sit amet iure nihil,
        recusandae quaerat eveniet!</p>
    </div>
    <div class="col">
      <h3>Hello Word 6</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum distinctio, molestias facere. In, minus, nesciunt. Fugiat voluptatum itaque eaque ad iste asperiores, ipsam accusantium, eveniet nam sit expedita repudiandae quo.</p>
    </div>
  </div>
</div>
:root {
	--clr-bg: 220 39% 15%;
  --clr-dark: 220 39% 10%;
  --clr-main: 0 100% 67%;
  --clr-light: 44 100% 88%;
  --clr-bright: 43 100% 65%;
  --clr-link: 199 100% 65%;
  --clr-text-base: 220 39% 95%;
}

.grid {
  display: grid;
	grid-gap: 20px;
  grid-auto-rows: minmax(100px, auto);
	grid-template-columns: 1fr 1fr;
}
.col {
	padding: 20px;
	
	background: hsl(var(--clr-dark));
	border-top: 10px solid hsl(var(--clr-main));
}

// Base Styles
* {
	box-sizing: border-box;
}
body {
	padding: 10px;

	background: hsl(var(--clr-bg));
	font: 400 1rem / 1.5 sans-serif;
}
h3 {
	margin: -20px -20px 15px -20px;
	padding: 20px 20px 10px;

	background: hsl(var(--clr-light));

	color: hsl(var(--clr-dark));
}
p {
	margin: 0;

	color: #efefef;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.