Bootstrap 3 - Form Input Element Alignment Fixing

Question

I am trying to make a form and have done this-

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">Disposed In Landfill - Tons</span>
        <input required type="text" name="disposed_in_landfill_tons" class="form-control">
    </div>
</div>

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">Sold Tons</span>
        <input required type="text" name="sold_tons" class="form-control">
    </div>
</div>

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">Sold - Net Cash</span>
        <input required type="text" name="sold_net_cash" class="form-control">
    </div>
</div>

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">Recycled - Tons</span>
        <input required type="text" name="recycled_tons" class="form-control">
    </div>
</div>

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">Recycled - Net Cash</span>
        <input required type="text" name="recycled_net_cash" class="form-control">
    </div>
</div>

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">Reused - Tons</span>
        <input required type="text" name="reused_tons" class="form-control">
    </div>
</div>

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">Reuse - Saved</span>
        <input required type="text" name="reuse_saved" class="form-control">
    </div>
</div>

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">Donation - Tons</span>
        <input required type="text" name="donation_tons" class="form-control">
    </div>
</div>

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">Donation - Value</span>
        <input required type="text" name="donation_value" class="form-control">
    </div>
</div>

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">Total Cost to Dispose</span>
        <input required type="text" name="total_cost_to_dipose" class="form-control">
    </div>
</div>

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">Actual Cost Dispose</span>
        <input required type="text" name="actual_cost" class="form-control">
    </div>
</div>

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">Disposal Avoidance Saving</span>
        <input required type="text" name="disposal_avoidance_savings" class="form-control">
    </div>
</div>

And find a output like this-

So, the problem is I want to make the left side all boxes to same alignment.

(Like all in the red colored line)

Can anyoun help me please?

Edit

I have tried -

width:300px;
text-align: right;

But not fixing

Answer 1

If you want them to have fixed width, set min-width to the input-group-addon. This will let them align equally.

width did not work for you because it is already overridden by width: 1% coming from Bootstrap code. If you overwrite it with proper CSS priority order, it will work as well.

.input-group-addon {
  min-width: 250px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon">Disposed In Landfill - Tons</span>
    <input required type="text" name="disposed_in_landfill_tons" class="form-control">
  </div>
</div>

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon">Sold Tons</span>
    <input required type="text" name="sold_tons" class="form-control">
  </div>
</div>

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon">Sold - Net Cash</span>
    <input required type="text" name="sold_net_cash" class="form-control">
  </div>
</div>

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon">Recycled - Tons</span>
    <input required type="text" name="recycled_tons" class="form-control">
  </div>
</div>

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon">Recycled - Net Cash</span>
    <input required type="text" name="recycled_net_cash" class="form-control">
  </div>
</div>

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon">Reused - Tons</span>
    <input required type="text" name="reused_tons" class="form-control">
  </div>
</div>

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon">Reuse - Saved</span>
    <input required type="text" name="reuse_saved" class="form-control">
  </div>
</div>

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon">Donation - Tons</span>
    <input required type="text" name="donation_tons" class="form-control">
  </div>
</div>

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon">Donation - Value</span>
    <input required type="text" name="donation_value" class="form-control">
  </div>
</div>

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon">Total Cost to Dispose</span>
    <input required type="text" name="total_cost_to_dipose" class="form-control">
  </div>
</div>

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon">Actual Cost Dispose</span>
    <input required type="text" name="actual_cost" class="form-control">
  </div>
</div>

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon">Disposal Avoidance Saving</span>
    <input required type="text" name="disposal_avoidance_savings" class="form-control">
  </div>
</div>