<label for="country-select">Country</label>
<div class="wrapper">
  <select class="wrapper__select" name="country-select" id="country-select">
    <option value="US">United States</option>
    <option value="JP">Japan</option>
  </select>
  <div class="wrapper__flags" role="presentation">
    <svg class="wrapper__flags__flag is-visible" data-country-code="US" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#FFF" viewBox="0 0 1235 650">
      <path d="M0 0h1235v650H0"/>
      <path stroke="#B22234" stroke-width="2470" stroke-dasharray="50" d="M0 0v651"/>
      <path fill="#3C3B6E" d="M0 0h494v350H0"/>
      <g id="e">
        <g id="d">
          <g id="f">
            <g id="c">
              <g id="b">
                <path d="M30.1 50.6l12-36 12 36-30.8-22h37.8" id="a"/>
                <use xlink:href="#a" x="82"/>
              </g>
              <use xlink:href="#b" x="164"/>
              <use xlink:href="#a" x="328"/>
            </g>
            <use xlink:href="#a" x="410"/>
          </g>
          <use xlink:href="#c" x="41" y="35"/>
        </g>
        <use xlink:href="#d" y="70"/>
      </g>
      <use xlink:href="#e" y="140"/>
      <use xlink:href="#f" y="280"/>
    </svg>
    <svg class="wrapper__flags__flag" data-country-code="JP" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600">
      <path fill="#fff" d="M0 0h900v600H0z"/>
      <circle fill="#bc002d" cx="450" cy="300" r="180"/>
    </svg>
  </div>
</div>