How to position two thymeleaf elements next to each other

Question

If the user is logged his name appears on top right of the screen. If the user hasn't validated his email a link appears with the message "email not validated". The link is to send email validation again. In the back everything is working fine. The link is positioned bellow the user name, now I am trying to position it next to the user name and to be in brackets.

<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>
</div>

.div-block-10 {
    position: absolute;
    top: 0px;
    right: 0px;
    margin-top: 20px;
    margin-right: 40px;
    white-space: nowrap;
}

.div-block-13{
    position: absolute;
    top: 0px;
    right: 7px;
    margin-top: 50px;
    white-space: nowrap;
}

I tried to change the div-block-13 css but I cant figure out how to position the link to appear right next to the user name. I guess there is a way to put the link together with the username in the div-block-10 element.

Answer 1

Try the below CSS:

.div-block-13{
  position: absolute;
  top: 0px;
  right: 7px;
  margin-top: 50px;
  white-space: nowrap;
  display:inline-block;
}