Unify spacing in project and group item components

group_item.vue and project_item.vue components have a tiny difference in spacing - the avatar in group item is placed with the name inside one container and does not receives flex gap. The difference doesn't seem big, but since both components appear next to each other, it can be easily spotted:

To do:

• place the avatar in group_item.vue outside the wrapping div, so that flex gap is present between the avatar and the group name
• change div element to span for a correct HTML structure. Block elements should not be nested inside inline elements.

File to edit:

• https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/vue_shared/components/list_selector/group_item.vue?ref_type=heads

How to reproduce:

1. Open Rails console. In your terminal: rails c
2. Enable the feature flag:

Feature.enable(:edit_branch_rules)

2. In a project, go to Settings / Repository
3. Expand Branch rules section
4. Create a rule or choose already existing one. Click View details
5. Click Edit in the Allowed to merge section. A drawer containing components in question will open.