<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;
}
This Pen doesn't use any external JavaScript resources.