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.

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

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>