Html – Is there a way to add 2 countries next to each other instead of 1 on each row by using CSS?

I’m trying to add 2 countries to each row parallel while keeping the sizes of each country box the same, currently I have one. I tried adjusting the flex box properties and making the size smaller but it didn’t work.
enter image descriptyour textion here

This is my html for my country divs in html:

 <div class="country">
    <img class="flag" src="country_flags/ws.png" alt="Flag of Samoa"/>
    <h2>Samoa</h2>
    <p>Currency: Euros (EUR)</p>
    <p>Regions: Atua
    , Fa'asaleleaga
    , Tuamasaga
    </p>
    <a class="wiki-link" href="https://en.wikipedia.org/wiki/Samoa" target="_blank">Wikipedia</a>
    </div>

<div class="country">
    <img class="flag" src="country_flags/pk.png" alt="Flag of Pakistan"/>
    <h2>Pakistan</h2>
    <p>Currency: Rupee (PKR)</p>
    <p>Regions: Azad Jammu and Kashmir
    , Balochistan
    , Gilgit-Baltistan
    , Islamabad
    , Khyber Pakhtunkhwa
    , Punjab
    , Sindh
    </p>
    <a class="wiki-link" href="https://en.wikipedia.org/wiki/Pakistan" target="_blank">Wikipedia</a>
    </div>

and this is my css

.country-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* Style for each country div */
.country {
  flex: 0 1 calc(50% - 1em); /* Adjust the width calculation */
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 3px solid #212020;
  margin: 1em; /* Add margin to create space between country divs */
  padding: 1em; /* Increase padding if needed for spacing within each country */
  text-align: center;
  background-color: beige;
}

/* Style for the flag image */
.flag {
  /* No need for additional styles here */
}

/* Style for the country name */
.country h2 {
  margin: 5px 0;
}

/* Style for the Wikipedia link */
.wiki-link {
  display: block;
  text-align: center;
  margin-top: 5px;
}