JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<div id="canada"></div>

CSS

#canada {
   --size: 300px;
   
   width: var(--size);
   height: calc(var(--size) / 2);
   background: linear-gradient(90deg, #f00 25%, #fff 25%, #fff 75%, #f00 75%);
   position: relative;
 }

 #canada::before {
   content: "\1F341\FE0E";
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   text-align: center;
   font-size: calc(var(--size) / 3);
   line-height: calc(var(--size) / 2);
   color: #f00;
 }