Elements Side by Side in Flex and Grid - CSS

Simple code to display elements side by side via display: flex and display: grid in CSS.

DEMO

Flex

Left

Right

Grid

Left

Right

HTML

<h2>Flex</h2>
<div class="container-box flex-box">
  <article><span>Left</span></article>
  <article class="gold-color"><span>Right</span></article>
</div>

<h2>Grid</h2>
<div class="container-box grid-box">
  <article><span>Left</span></article>
  <article class="gold-color"><span>Right</span></article>
</div>

CSS

.container-box article {background: lightblue;}
.container-box article span {display: block; padding: 0.5em;}
.container-box  article.gold-color {background: gold;}

.flex-box {display: flex;}
.flex-box article {width:50%;}

.grid-box {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 0;
}