How to position two elements next to each other

Question

I am rendering HTML page with Thymeleaf . I have user names which I display on top right screen. I want to add a link which I display if user hasn't validated his email. I am trying to make the link appear after the user name in brackets. Here is this part of the 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>

The CSS for user name

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

After finishing CSS tutorials I have basic knowledge and it seems I don't understand the display properties. I want to keep CSS for user this way and the CSS for the link is

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

My logic is that I want it on same height of page so I kept 98px and 0px also to align it on the right so if the user name is longer to move on the left and the link to stay fixed to the right.Also tried all position properties and my link isn't showing properly - goes out of screen or isn't on the same height

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> 

is this what you are looking for

I just used the flex properties, justify-content: center; property will align your child divs horizontally center and align-content:center will align your divs in vertically center of the parent div and will come next to each other. if you want some gap between your divs simply give the padding or margin on divs. Let me know if you need any help on this.