Open In App

How to make div with left aligned text and right aligned icon using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn to create an HTML div that has left-aligned text and a right-aligned icon. Sometimes, we need to align the text to the left side & if there is an image or icon used then align it to the right side. For this, we can use the display property by setting the value as a flex property that is used to display an element as a block-level flex container. along with using the float property that can be used to float the item to the specified position.

Properties Used:

  • display: To display text and icons side by side, we will use the display: flex property.
  • float: To set the icon on the right side of the div, we use float: right property.

Approach: We will use HTML to create a div. After that, we add text and icons to the div and style the div elements according to our requirements using CSS. 

The below example demonstrates the above approach.

Example 1: In this example, we have set up the icon on the right side of the text using the display: flex property. In the below output, due to display: flex and flex-direction: row properties text and icon appear side by side in every div element.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Text alignment with icon</title>
    <meta name="viewport" 
          content="width=device-width, 
                               initial-scale=1">
    <link rel="stylesheet" href=
    <style>
        div {
            display: flex;
            flex-direction: row;
            height: 50px;
            width: 400px;
            font-size: 30px;
        }
    </style>
</head>
  
<body>
    <!--display for the all div is block-->
    <div style="background-color:green;
                color:white">
        <span class="text">GeeksforGeeks</span>
        <span class="icon">
            <i class="material-icons">computer</i>
          </span>
    </div>
    <div style="background-color:white;
                color:green">
        <span class="text">GeeksforGeeks</span>
        <span class="icon">
            <i class="material-icons">computer</i>
          </span>
    </div>
    <div style="background-color:green;
                color:white">
        <span class="text">GeeksforGeeks</span>
        <span class="icon">
            <i class="material-icons">computer</i>
          </span>
    </div>
</body>
</html>


Output: 

 

Example 2: In this example, we have set up the icon on the right side of the div. In the output, you can see all 3 divs one below another, an icon on the right side of the div, and text on the left side of the div element.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Text alignment with icon</title>
    <meta name="viewport" content=
                "width=device-width, 
                 initial-scale=1">
    <link rel="stylesheet" href=
    <style>
        .parentDiv {
            display: block;
            height: 110px;
            width: 400px;
            font-size: 30px;
        }
  
        /* To set icon at the right side of the div*/
        .icon {
            margin-left: 10px;
            float: right;
        }
    </style>
</head>
  
<body>
  
    <!--parent div-->
    <div class="parentDiv">
        
        <!--display for the all div is block-->
        <div style="background-color:green;
                    color:white">
            <span class="text">GeeksforGeeks</span>
            <span class="icon">
              <i class="material-icons">computer</i>
            </span>
        </div>
        <div style="background-color:white;
                    color:green">
            <span class="text">GeeksforGeeks</span>
            <span class="icon">
              <i class="material-icons">computer</i>
            </span>
        </div>
        <div style="background-color:green;
                    color:white">
            <span class="text">GeeksforGeeks</span>
            <span class="icon">
              <i class="material-icons">computer</i>
            </span>
        </div>
    </div>
</body>
</html>


Output: 

 



Last Updated : 20 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads