In a country list

<div class="demo">
  <ul id="list" class="list demo-card" aria-label="Countries"></ul>
</div>

import { flagSvg } from 'https://www.devix.pk/cdn/oss/flag-icons@1.1.0/index.js';

const names = new Intl.DisplayNames([navigator.language, 'en'], { type: 'region' });
const codes = ['ae', 'sa', 'pk', 'in', 'gb', 'us', 'eg', 'tr', 'qa', 'kw', 'om', 'bh'];
document.getElementById('list').innerHTML = codes
  .map((code) => `<li>${flagSvg(code, { width: 18, radius: 1.5 })}<span>${names.of(code.toUpperCase())}</span><kbd>${code.toUpperCase()}</kbd></li>`)
  .join('');

.list { list-style: none; margin: 0; padding: 4px; }
.list li { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 6px; font-size: 13px; }
.list li:hover { background: var(--demo-code); }
.list svg { width: 18px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--demo-fg) 8%, transparent); }
.list span { flex: 1; }
.list kbd { font: 10.5px var(--demo-mono); color: var(--demo-dim); }