css columns (columns prop)

by ShaCP

HTML

<div class="container">
<div class="column">
<div class="card">
1 - Captain America
<div class="hero-info">
America’s World War II Super-Soldier continues his fight in the present as an Avenger and untiring sentinel of liberty.
</div>
</div>
<div class="card">
2- Hawkeye
<div class="hero-info">
An expert marksman and fighter, Clint Barton puts his talents to good use by working for S.H.I.E.L.D. as a special agent. The archer known as Hawkeye also boasts a strong moral compass that at times leads him astray from his direct orders.
</div>
</div>
<div class="card">
3 - Hulk
<div class="hero-info">
Exposed to heavy doses of gamma radiation, scientist Bruce Banner transforms into the mean, green rage machine called the Hulk.
</div>
</div>
</div>
<div class="column">
<div class="card">
4 - Black Widow
<div class="hero-info">
Trusted by some and feared by most, the Black Widow strives to make up for the bad she had done in the past by helping the world, even if that means getting her hands dirty in the process.
</div>
</div>
<div class="card">
5 - Iron Man
<div class="hero-info">
Inventor Tony Stark applies his genius for high-tech solutions to problems as Iron Man, the armored Avenger.
</div>
</div>
<div class="card">
6 - Thor
<div class="hero-info">
Thor Odinson wields the power of the ancient Asgardians to fight evil throughout the Nine Realms and beyond.
</div>
</div>
</div>
</div>

CSS

.container {
 /*  display: flex; */
 columns: 2;
}

.card {
  width: 100%;
  margin: 0 0 1rem;
  border: 1px solid black;
}

.column {
/*   width: 50%; */
}