How to Align the <span> Element to the Right of the <div>

Solutions with CSS properties

If you want to align a <span> element to the right of the <div>, you can use some CSS. Particularly, you need to use the float property with the “right” and “left” values.

Now, we’ll demonstrate an example and then explain it.

Example of aligning a <span> to the right of the <div> element:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .title {
        display: block;
        border-top: 5px solid #969696;
        background-color: #76db95;
        height: 30px;
        line-height: 30px;
        padding: 4px 6px;
        font-size: 16px;
        color: #000000;
        margin-bottom: 13px;
        clear: both;
      }    
      .title .date {
        float: right;
      }      
      .title .name {
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="title">
      <span class="name">Example</span>
      <span class="date">05.05.2020</span>
    </div>
  </body>
</html>

Try it Yourself »

Result

Example 05.05.2020

In our example, we have a <div> tag with two <span> elements. We applied the float property with the “right” value to the “date” class and the “left” value to the “name” class of the <span> elements. Also, we used the clear property with the “both” value on the "title" class to prevent floating elements on both sides.

So, in this way you can align the <span> within the <div> element to the right, but let's see another example as well.

Example of aligning a <span> to the right of the <div> element with the CSS flex property:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .title {
        display: flex;
        justify-content: space-between;
        border-top: 5px solid #969696;
        background-color: #76db95;
        height: 30px;
        line-height: 30px;
        padding: 5px 15px;
        font-size: 18px;
        color: #212121;
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <div class="title">
      <span>Example</span>
      <span>05.05.2020</span>
    </div>
  </body>
</html>