Question about HTML/CSS assessment

Learning Challenge

I am having trouble with two different things. The first problem is that I cannot place the secondary text under the title. The second issue is that when the screen is shorter than 599px, my images lose all formatting.

Question

For my first problem, should I place secondary text under the same div as the title? When I tried doing that, then the problem was that they are not supposed to have the same color. How could I handle that issue?
For my second problem, should I copy and paste all the formatting I wrote for media screen longer than 600px onto my media screen for shorter than 599px?

What I’ve tried

I have tried a great many combinations, I have browsed this forum for answers and I have tried using flexbox formatting without success.

Screenshots

Here I have screenshots from my code for the html file and style.css.

And here I have pictures of my output:
First the output when the screen is longer than 600 px:

And the output when the screen is shorter than 599px:

I have fixed my second problem by simply doing the copy and paste of my own code over to the shorter screen.
My only issue now is that I cannot seem to have the Title and the secondary text to the right of the avatar.
Any help would be greatly appreciated. Thank you!

I did some trial and error, submitted it and passed. Thank you!

Congratulations on the pass!

There is quite a bit of detail involved in styling that card! Sounds like you took a great approach of making small changes and testing it out in the browser until you got the styles you were looking for.
On to the next assessment - you are one step closer!
Jesse