Aligning buttons next to many inputs inside a row - html

Question

This is part of a bigger table. I have three fields and each one should have a remove button aligned next to it.
The CSS I have alignes only the first button, and the other buttons are in the same position. How can I place the other two buttons next to their fields.
Thanks!
td .btn.aligned {
position: absolute;
margin-top: 7px;
float: right;
margin-left: 5px;
}
td input {
float: left;
margin-bottom: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://use.fontawesome.com/a06b1c7829.js"></script>
<table id="tablaProveedores" class="table table-hover">
<thead class="thead-inverse">
<th>Phone numbers</th>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="phone1_1" id="telefono1_1" class="form-control" disabled/>
<a title="Remove" class="btn btn-danger btn-xs aligned"><span class="fa fa-times"></span></a>
<input type="text" name="phone2_1" id="telefono2_1" class="form-control" disabled/>
<a title="Remove" class="btn btn-danger btn-xs aligned"><span class="fa fa-times"></span></a>
<input type="text" name="phone3_1" id="telefono3_1" class="form-control" disabled/>
<a title="Remove" class="btn btn-danger btn-xs aligned"><span class="fa fa-times"></span></a>
</tr>
</tbody>
</table>

Answer 1

Wrap them in <div>s. Giving them the class .row with the bootstrap framework will do everything you need.
td .btn.aligned {
position: absolute;
margin-top: 7px;
float: right;
margin-left: 5px;
}
td .lowered {
margin-top: 44px;
}
td input {
float: left;
margin-bottom: 10px;
}
.spacer {
padding-left: 30px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://use.fontawesome.com/a06b1c7829.js"></script>
<table id="tablaProveedores" class="table table-hover">
<thead class="thead-inverse">
<th>Phone numbers</th>
</thead>
<tbody>
<tr>
<td>
<div class="row">
<input type="text" name="phone1_1" id="telefono1_1" class="form-control" disabled/>
<a title="Remove" class="btn btn-danger btn-xs aligned"><span class="fa fa-times">
</span>
</a>
</div>
<div class="row">
<input type="text" name="phone2_1" id="telefono2_1" class="form-control" disabled/>
<a title="Remove" class="btn btn-danger btn-xs aligned"><span class="fa fa-times">
</span>
</a>
</div>
<div class="row">
<input type="text" name="phone3_1" id="telefono3_1" class="form-control" disabled/>
<a title="Remove" class="btn btn-danger btn-xs aligned"><span class="fa fa-times">
</span>
</a>
</div>
</tr>
</tbody>
</table>

Answer 2

I was able to get this accomplished with a bit less code. I removed the absolute positioning and applied a max-width to the input and a float left instead of right to the buttons since they're in the same table-cell.
Check out the jsfiddle
td .btn.aligned {
margin-top: 7px;
float: left;
margin-left: 5px;
}
td input {
float: left;
margin-bottom: 10px;
max-width:80%;
}