Строка на встает на свое место

На сайте есть комментарии, но для простоты я взял HTML код страницы и разместил его здесь: http://fh7929mi.bget.ru/index-2.html

Проблема вот в чем.

Нужно, чтобы слово "Автор" находилось между va и флажком.
И чтобы слово "Крановщик" было самостоятельной строкой выше "Сегодня, 14:53".

По коду так они и расположены, а показываются совсем не на своих местах. И даже с Инспектором кода я совершенно не могу понять, как их переместить на требуемые места.

 

Спасибо, проблема ушла, но не вся, а наполовину.

По Вашей рекомендации. я вписал Ваш код:

Код (Text):

1. <div class="comment__author" style="display: inline-flex;">
2.     <a href="/profile/face.php?kto=72">Wow  va</a>
3.     <div style="border: 1px solid red;color: green;margin-left: 1em;">Автор</div>
4. </div>  

И теперь "Автор" там, где положено.

По аналогии сделал для строки "Крановщик", чтобы она была самостоятельной строкой над "Сегодня":

Код (Text):

1. <div class="comment__author" style="display: inline-flex;">              
2. <div style="border: 1px dotted #3399CC; color: #936; margin-left: 1em;">Крановщик</div>
3. </div>

Но она легла на "автор" (см. http://fh7929mi.bget.ru/index-3.html)

Что еще нужно изменить?

 

При таком раскладе, может быть, проще сделать табличную верстку?

Или на сегодня это уже совсем не кашерно?

 

Похоже, что надо grid сетку перестраивать. Никогда этого не делал, но попробую.