Build a Page of Playing Cards

HTML-CSS
1

here is my code:
https://codepen.io/cquyywmh-the-builder/pen/VYYxamM

my question is; why is it that when I put multiple characters in <div> like <div> A ♠</div>, then the two characters will be in the same line like this:

image
image308×122 523 Bytes

but if you do like two <div> like
<div>A</div>
<div>♠</div>
they would be on different lines.
image

and are there other way to make it so that the A and :spade_suit: would be on different line without using separate divs? I just got this solution from https://www.youtube.com/watch?v=-0_CDnEoAdg&ab_channel=PreCodeCamp so I am kinda getting the impostor syndrome when I solve this code with his solution.

Can you also give my tips too on how to think critically to solve a problem if you are stuck on one. the tip that I got from a programming related course is that if you cant solve a problem even after thinking about it (minimum 15 mins) you should try using google already because at that point, further thinking about the problem will solve nothing. What do you think?

2

you could use other elements like spans and style them appropriately
but if it’s only text, that will be a single unit, you can’t separate text via styling only

3

Maybe you can try <br/>
just add it like this <div> A<br/>♠</div>
but I don`t how limited it is if you use them and apply styles.

At least,it can directly and simply solve your problem!

By the way,the reason why you will see two text characters within two div element respectively on different lines is that div element will take up the whole width of its parent.

If you give borders to two div elements,you will understand.