JSFiddle - React, Tailwind, and code Playground

by Vaniljs

HTML

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div class="checked-flag">
    <img src="https://ya-webdesign.com/images/russian-flag-pin-png-3.png" height="182" width="244"/>
</div>
<br><br><br>

<div class="list-active">

    <div class="flag">
        <img src="https://www.mexatk.com/wp-content/uploads/2016/12/علم-دولة-النمسا-2.png" height="182" width="244"/>
        <p>Австрия</p>
    </div>

    <div class="flag">
        <img src="https://ya-webdesign.com/images/belgium-flag-png-5.png" height="182" width="244"/>
        <p>Бельгия</p>
    </div>

</div>

CSS

.checked-flag img,
    .flag img {
        width: 40px;
        height: 100%;
    }
    .checked-flag,
     .flag {
        display: flex;
    }

JavaScript

$('.flag').click(
  function () {
    // Берет img выбранного элемента и ставит в главный	
    $('.checked-flag').html($(this).find('img'));

    // Скрываем выпадающий список
    $('.list-active').slideUp(500);
  });

// Изначально список скрыт
$('.list-active').hide();

// Разворачивание списка
$('.checked-flag').on('click', function () {
  $('.list-active').slideToggle(500);
});