Float the span element inside the td-CodePudding

How can I set the span element float towards the right of the td element in the HTML?

In the above image, I need to place the text 1 (small letter) floating towards the right of the column. Inside the column, there is already an input field that exists.

I have tried out different ways to set through the CSS but didn't work.

I want to make that text 1 always aligned right to the input field like superscript and maintain the position in the responsive template.

Code:

  <table>
    <tbody>
      <tr>
       <td>House</td>
       <td>
         <span class="position-absolute badge-tooltip">
               1
         </span>
         <input class="form-control rounded-0 border-0 m-0 d-block text-right" type="text" />
       </td>
       <td></td>
       <td></td>
      </tr>
    </tbody>
  </table>

CSS

.badge-tooltip {
  float: right;
}

CodePudding user response：

You could use your own position absolute, like this.

Just bear in mind that the right value needs to be adjusted based on if the next tds elements have any text in them and on different resolutions it needs to be changed using media-queries or you can set the value with %` percentage, which is responsive in nature but you have to fiddle with it to figure out the right percentage.

    .relative-td {
      position: relative;
    }

    .position-absolute {
      position: absolute;
      right: -15px;
      bottom: 3px;
    }

      <table>
        <tbody>
          <tr>
           <td>House</td>
           <td class="relative-td">
             <span class="position-absolute badge-tooltip">
                   1
             </span>
             <input class="form-control rounded-0 border-0 m-0 d-block text-right" type="text" />
           </td>
           <td></td>
           <td></td>
          </tr>
        </tbody>
      </table>

CodePudding user response：

You are already using the bootstrap class position-absolute, so to achieve the effect you want, instead of using float:right, add the bootstrap class position-reletive to the parent element and top-0 end-0 to the child element:

   <td class="position-relative">
     <span class="position-absolute top-0 end-0">
           1
     </span>
     <input class="form-control rounded-0 border-0 m-0 d-block text-right" type="text" />
   </td>

This will align the span to the top-right like a superscript.