Profile name next to photo

[oocopperpot]

This is something I come across a lot when doing CSS challenges, a profile card where the name is next to the profile photo. What is the best way to achieve this?

my example below on the right is the finished look but I’ve got a container inside a container to achieve this via flex-box. Can’t help but feeling there’s a much cleaner way.

My examples

Cheers

[sitek94]

The easiest way I can think of would be:

<div class="card">
  <img class="profile"/>
  <div>
    <div class="name">John Doe</div>
    <div class="job">Frontend Developer</div>
  </div>
</div>

.card {
  display: flex;
  align-items: center;
}

Of course, it’s very simplified version and you would have to add some margins, etc. But this is the main idea for the layout of the card.

Flexbox example

Alternatively you could use display grid, if you don’t want this one extra div.

Grid example

Also, w3schools has a lot of tutorials to create simple cards, so you might find something useful there:

w3schools: How To CSS Cards

Good luck

[oocopperpot]

What a fantastic example you made! Thank you. I’ve been playing around with your example and it makes sense.

Will check out the links.