'Aligning an icon to the right inside label tag

I tried changing the style of the i tag to 'float:right' in order to align the icon to the right, but it didn't work. The ideal look would be like the image below. Thanks in advance.

enter image description here

<div class="row">
<div class="form-group col-2">
    <label for="form-realname" class="d-flex align-items-center">TEXT<i class="fa fa-info-circle" aria-hidden="true" style="float:right;"></i></label>
    <div>
        <input type="text" class="form-control" id="form-test" name="test" autocomplete="off">
    </div>
</div>
htmlcss


Solution 1:[1]

Here is my simplified solution for your problem. You can paste it on some js and html playground (codesandbox, jsfiddle, etc.) to understand the idea

You can base on it to do what you need.

<body>
  <style>
    .flex-container {
      display: flex;
      justify-content: space-between;
      width: 200px;
    }
    .input-div {
      width: 200px;
    }
  </style>
  
  <div class="row">
    <div class="form-group col-2">
      <div class="flex-container">
        <label>TEXT1</label>
        <label>TEXT2</label> // Your <i> tag goes here
      </div>
      <div>
        <input class="input-div" type="text" class="form-control" id="form-test" name="test" autocomplete="off">
      </div>
    </div>
</body>

The idea is:

  • You need to set the input width and the container of the label and icon the same. (With bootstrap, you can use class col for them)
  • The label and icon are not nested as you did, separate it out like I did
  • Styling the label and icon container with flex, and justify-content: space-between

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 thelonglqd

Related Questions