title: How to position two elements next to each other
body: <p>I am rendering HTML page with <a href="https://www.thymeleaf.org/" rel="nofollow noreferrer">Thymeleaf</a>. 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</p>
  
  <pre><code>&lt;div th:if="${isLogged}" class="div-block-10"&gt;
      &lt;div class="user_name" th:text="${user.getFirstName() + ' ' + user.getLastName()}"&gt;Your Name&lt;/div&gt;
      &lt;div th:if="${!user.isEmailValidated()}" class="div-block-13"&gt;
          &lt;div class="email_confirmed"&gt;
              &lt;a th:href="@{'/email/send/' + ${user.getToken()}}"&gt;Your email is not confirmed!&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>The CSS for user name</p>
  
  <pre><code>.div-block-10 {
      position: absolute;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      margin: 98px 27px 0px auto;
      text-align: left;
  }
  </code></pre>
  
  <p>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</p>
  
  <pre><code>.div-block-13{
      position: absolute;
      margin: 98px auto 0px auto;
      text-align: right;
  }
  </code></pre>
  
  <p>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</p>