<div class="wrapper">
  <div class="row">
    <div class="col">
      <div class="inner">
        <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>
    <div class="col">
      <div class="inner">
        <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>
  </div>
  <div class="row">
    <div class="col">
      <div class="inner">
        <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>
    <div class="col">
      <div class="inner">
        <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>
  </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%;
}

.wrapper {
	&:after {
		content: "";
		display: table;
		clear: both;
	}
}
.row {
	&:after {
		content: "";
		display: table;
		clear: both;
	}
}

.col {
	width: calc(50% - 1%);
	max-height: 340px;

	position: relative;

	float: left;

	margin-left: 1%;
	margin-right: 1%;
	margin-bottom: 20px;

	padding: 20px;

	background: hsl(var(--clr-dark));
	border-top: 10px solid hsl(var(--clr-main));

	&:first-child {
		margin-left: 0;
	}
	&:last-child {
		margin-right: 0;
	}

	&:after {
		content: "";

		display: block;

		padding-top: 100%;
	}
}

.inner {
	position: absolute;
	top: 20px;
	left: 20px;
	right: 20px;
	bottom: 20px;
}



// 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.