user-list.css

.user-list {
  border: 1px solid grey;
  padding: 20px;
}

.user-list__user {
  align-content: space-around;
  margin-top: 5px;
}

.user-list__user:first-child {
  margin-top: 0;
}

user-list.jsx

import User from '../user/user'
import './user-list.css';

export default function UserList(props) {
  const { users } = props;
  
  return (
    <div className='user-list'>
      {users.map(user => (
        <User className='user-list__user' user={user} />
      )}
    </div>
  );
}

UserList.defaultProps = { users: [] };

user.css

.user {
  display: flex;
  align-content: space-between;
}

.user__avatar {
  flex: 0 0 auto;
}

.user__name {
  flex: 1 0 auto;
}

user.jsx

import './user.css';

export default function User(props) {
  const {
    className,
    user: { firstName, lastName, avatar }
  } = props;

  return (
    <div className={`user ${className}`}>
      <img className='user__avatar' src={avatar} />
      <div className='user__name'>{firstName} {lastName}</div>
    </div>
  );
}

User.defaultProps = { className: '', user: {} };