How do I add text-based units like "lbs" floated to right inside of an input element (or outside of it)?

You can use something like this.

Outside box:

<input></input><span style="margin-left:10px;">lb</span>

Inside box:

<input style="padding-right:20px; text-align:right;" value="50"></input><span style="margin-left:-20px;">lb</span>

Fiddle

You can make use of bootstrap input-group component.

Note: The example below uses bootstrap 4 classes

<div class="input-group">
   <input type="number" class="form-control">
   <div class="input-group-append">
       <span class="input-group-text"> m </span>
   </div>
</div>

Here is the result below:

I would do this by nudging an extra element (like a span) over the input using position: relative and left: -20px.

Then some padding-right on the input element to ensure that the user's input wont overlap on the new element.

Example here:

https://jsfiddle.net/peg3mdsg/1/