Как расположить два элемента рядом друг с другом

Question

Я рендеринг HTML-страницы с Thymeleaf .У меня есть имена пользователей, которые я отображаю в правом верхнем углу экрана.Я хочу добавить ссылку, которую я показываю, если пользователь не подтвердил свою электронную почту.Я пытаюсь сделать ссылку появляется после имени пользователя в скобках.Вот эта часть HTML

<div th:if="${isLogged}" class="div-block-10">
    <div class="user_name" th:text="${user.getFirstName() + ' ' + user.getLastName()}">Your Name</div>
    <div th:if="${!user.isEmailValidated()}" class="div-block-13">
        <div class="email_confirmed">
            <a th:href="@{'/email/send/' + ${user.getToken()}}">Your email is not confirmed!</a>
        </div>
    </div>

CSS для имени пользователя

.div-block-10 {
    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 98px 27px 0px auto;
    text-align: left;
}

После завершения обучения CSS у меня есть базовые знания, и, кажется, я не понимаю свойства экрана.Я хочу сохранить CSS для пользователя таким образом, и CSS для ссылки будет

.div-block-13{
    position: absolute;
    margin: 98px auto 0px auto;
    text-align: right;
}

Моя логика заключается в том, что я хочу, чтобы он был на той же высоте страницы, поэтому я сохранил 98px и 0px, чтобы выровнять его справапоэтому, если имя пользователя длиннее для перемещения влево, а ссылка остается фиксированной вправо. Также пробовал все свойства позиции, и моя ссылка не отображается должным образом - выходит из экрана или не на той же высоте

Answer 1

.div-block-10 {
  display: flex;
  align-items:center;
  height:100%;
  margin: 98px 0 0;
  text-align: left;
  justify-content:center;
}

<div th:if="${isLogged}" class="div-block-10">
            <div class="user_name" th:text="${user.getFirstName() + ' ' + user.getLastName()}">Your Name</div>
            <div th:if="${!user.isEmailValidated()}" class="div-block-13">
                <div class="email_confirmed">
                    <a th:href="@{'/email/send/' + ${user.getToken()}}">Your email is not confirmed!</a>
                </div>
            </div>

- это то, что вы ищете

Я только что использовал свойства flex, justify-content: center;свойство выровняет ваши дочерние элементы по горизонтали по центру и выровняет содержимое: центр будет выравнивать ваши элементы по вертикали по центру родительского элемента и будет располагаться рядом друг с другом.если вы хотите некоторый промежуток между вашими div, просто укажите отступы или поля на div.Дайте мне знать, если вам нужна помощь по этому вопросу.