Flexbox based Blog Card design best practise

[tian-yan]

I was trying to setup a blog card from scratch using flexbox in Tailwindcss (tailwindplay sourcecode is here), but there are so many portions of the blog card messed up which I can't figure out.
My requirements:

• blog cards: flex-col in sm screen, and flex-row in md screen and above.
• within blog card: image sits on top of text in sm screen, but sits on the left of text for md screen and above.
• Each blog card has the same Height and same width in any screen size, but can vary when screen size changes.

1. Hence I was wondering were there any best-practice design which we can follow to save a huge amount of efforts, time, and pain for beginners like me?

In my specific example:
2. should I fix (in px or in fraction) the width and height of blog card of should I make them auto-fit its contents?
3. Why the image or texts overflow to outside of the div box in very small screen size?
4. How to make image auto-fix to its parent HTML element? In other words; 1/2 height + full width of blog card in sm screen, and full height + 1/3 width of blog card in md screen size and above

I tried all w-xx & h-xx options according to width and height chapter of tailwindcss official guide, but did not find a perfect solution.