<h1>Implementation in Chrome</h1>
<div class="grid-container">
  <div class="grid-element element-a"><p>I</p></div>
  <div class="grid-element element-b"><p>II</p></div>
</div>
body {
  text-align: center;
  font-family: "Dosis";
}

.grid-container {
  display: grid;
  grid-template-columns: 150px 20px 350px;
  grid-template-rows: auto;
}

.grid-element {
  background-color: #444;
  color: #fff;
  font-size: 2em;
  padding: 10%;
}

.element-a {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
  background: #6F9;
}

.element-b {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  background: #69F;
}

p {
  color: black;
  background: #fff;
  padding: 10px;
  margin: 0;
}

h1 {
  text-align: left;
}
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Dosis

External JavaScript

This Pen doesn't use any external JavaScript resources.