Почему img для :before не работает как надо?

Мне надо, чтобы расположение было как на 1м скрине. То есть есть две строки текста, обёрнутые в div с классом .name и для этого .name я псевдоэлементом ставлю изображение через бэкграунд.
По началу изображение было вообще наверху, но потом подсказали, что это из-за того,что мой 1й p блочный, поэтому он не пускает картинку к себе. Ну я ему inline-block поставил, и сейчас ситуация как на 3м скрине
Пробовал ставить inline-block и для 2го , много чего пробовал, но что-то не помогло.
Подскажите пожалуйста, что не так(ну и объясните почему оно так работает)
*Знаю, что через скрины здесь код не показывают, но я сейчас не у компухтера.

Дополнительно:

Это фото реального человека, значит, контент, img, а никакой не псевдо.

Абсолюты тут не нужны вообще.
Помогут флексы, но тогда имя и должность нужно будет обернуть в div.
Либо, ещё лучше, гриды. 2х2
Вообще, поможет даже банальный float :) Только аккуратно. Но лучше гриды.

<div class="person">   <img class="person__photo" src="">   <div class="person__name">Имя фамилия</div>   <div class="person__position">Должность</div> </div>

.person {   display: grid;   grid-template-columns: 5rem 1fr;   align-items: center;   gap: 0.25rem 1rem; } .person__photo {   grid-row: span 2;   align-self: center;   width: 5rem;   height: 5rem;   border-radius: 50%; } .person__name {   align-self: end; } .person__position {   align-self: start; }

Это изображение контентное, а не оформительское. На реальном сайте, его очевидно будут загружать через админку. Его следует ставить через тег img

<div class="person">   <img class="person__photo" src="">   <div class="person__wrapper">     <div class="person__name">Имя фамилия</div>     <div class="person__position">Должность</div>   </div> </div>

.person {   display: flex;   align-items: center;   gap: 1rem; } .person__photo {   width: 50px;   height: 50px;   border-radius: 50%;   flex-shrink: 0; } .person__wrapper {   display: grid;   gap: 0.25rem; } .person__name {} .person__position {}

Ответы:

Добавьте к блоку .name position: relative и отступ от края на ширину аватарки и расстояния до имени. А к псевдоэлементу ::before position: absolute и сместите влево на значения отступа. Таким образом, через свойства top left сможете спозиционировать как вам угодно относительно имени. Пример ниже:
snippet