How can I right align column with text and input?-CodePudding

I am upgrading a project using bootstrap 3 to bootstrap 5. I have columns with text and input and I need to align them to the right side of the column. I am not finding the right way in Bootstrap 5 to get this to work.

Current with Bootstrap 3:

<div >
<div >
Text:&nbsp;
<input  maxlength="12" style="width:130px;display:inline-block;" type="text" value="0.00">
</div>
</div>

Changing the above HTML to Bootstrap 5, I currently have the following that does not work:

<div >
<div >
Text:&nbsp;
<input  maxlength="12" style="width:130px;" type="text" value="0.00">
</div>
</div>

Code in jsFiddle: https://jsfiddle.net/korazy8s/o2wyz64u/36/

CodePudding user response：

There are a couple of ways to do it, you could use margin-left auto on the children of col, or you could just use flexbox justify-content end(right).

Following an exmple where I replace your float-end with justify-content-end:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div >
  <div >
    <div >NOT_IMPORTANT</div>

    <!-- I want the contents in this column to be:
     right aligned and single line
-->
    <div >
      <span >Name:</span>
      <div  style="max-width: 200px;">
        <span >$</span>
        <input  maxlength="12" value="0.00">
      </div>

    </div>
  </div>

  <div >
    <div >
      Text:&nbsp;
      <input  maxlength="12" style="width:130px;" type="text" value="0.00">
    </div>
  </div>

</div>