body, div {
display: grid;
grid-template-columns: 1fr 1fr;
}
div {
display: flex;
align-items: center;
justify-content: center;
height: 100px;
padding: 1em;
flex-flow: column;
}
div::before,
div::after {
content: attr(style);
font: bold 120% Consolas, Monaco, monospace;
}
div::before {
color: white;
}
<div style="background: hsl(60, 100%, 50%)"></div>
<div style="background: hsl(60, 100%, 70%)"></div>
<div style="background: hsl(230, 100%, 50%)"></div>
<div style="background: hsl(230, 100%, 70%)"></div>