Two-column card layout for desktop and mobile - css

Question

Here's my fiddle: https://jsfiddle.net/b6q7pmkg/
I'm trying to achieve two-column cards where it always stays two column regardless on mobile or desktop.
So something like this:
On desktop:
On mobile:
Here's what I have so far.. but not quite there..
.cardContainer {
max-width: 30rem;
}
css:
.root {
display: inline-block;
width: 100%;
border: 1px solid rgb(221, 221, 221);
color: rgb(90, 90, 90);
}
.link {
vertical-align: bottom;
text-decoration: none;
cursor: pointer;
}
.imageContainer{
display: inline-block;
vertical-align: top;
width: 40%;
}
image {
-o-object-fit: cover;
object-fit: cover;
width: 100%;
height: auto;
display: block;
}
.content {
display: inline-block;
vertical-align: top;
width: 60%;
padding: 1rem;
}
.large .title {
font: 400 1.1875rem/1.263 'Avenir Next W01', 'Helvetica Neue', 'Helvetica', 'sans-serif';
font-size: 1.1875rem;
line-height: 1.263;
letter-spacing: 0.0125rem;
font-weight: 700;
}
.body {
margin-top: 1rem;
color: rgb(139, 139, 139);
display: block;
}
.description {
margin-bottom: 0;
font-size: inherit;
margin-top: 1rem;
}

Answer 1

Here's a model with a basic css.
The important thing to know here is the double flexbox; one flexbox for card (img/paragraph), and one flexbox for all the cards, with a flex-wrap: wrap; to make sure they're doing their job right.
I use this flexbox cheat sheet to remember exactly how flexbox works :)
Here's a copy of the jsfiddle code :
section{
display: flex;
flex-wrap: wrap;
}
article{
display: flex;
flex-direction: row;
border: 1px solid black;
width: 300px;
}
<section>
<article>
<img src="http://lorempixel.com/150/100/" />
<p>
Some text.
</p>
</article>
<article>
<img src="http://lorempixel.com/151/100/" />
<p>
Some text.
</p>
</article>
<article>
<img src="http://lorempixel.com/150/101/" />
<p>
Some text.
</p>
</article>
</section>
edit: I just made an edit of the fiddle with grey text and vertically centered paragraphs :)

Answer 2

You can do this with CSS Grid as well:
Put all of your cards in a <div class="grid-container">, add the following lines in your CSS:
.grid-container{
display: grid;
grid-gap: 20px; /*that's optional, for the space between your cards*/
grid-template-columns: repeat(auto-fit, 300px);
}