Input group addon not aligning well on the mozilla browser - css

Question

I have the following table:
<table class="neo-table">
<tr>
<td>Day of final discharge home</td>
<td>{{ form_widget(form.mHomeDischargeDay, {'id': 'M_Home_discharge_day', 'attr':{'style':'width:60px'}})}}</td>
<td><input type="button" value="enter date" onclick="convertDate('M_Home_discharge_day')"></td>
</tr>
<tr>
<td >Weight at final discharge</td>
<td colspan="2"><div class="input-group">{{ form_widget(form.mHomeWeight, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">g</div> </div></td>
</tr>
<tr>
<td >Head circumference at final discharge</td>
<td colspan="2"><div class="input-group">{{ form_widget(form.mHomeHeadCirc, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">cm</div> </div></td>
</tr>
<tr>
<td>Length at final discharge</td>
<td colspan="2"><div class="input-group">{{ form_widget(form.mHomeLength, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">cm</div></div></td>
</tr>
<tr>
<td>Enteral feeding at final discharge</td>
<td>{{ form_widget(form.mHomeFeeding)}}</td>
<td></td>
</tr>
</table>
On the chrome browser, it works fine and displays this:
But on the mozilla browser, the group addon is not correctly aligned:
I tried adding this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet"/>
Like mentioned on this post:
Input group addon alignment
But I have not been able to figure out so far where I can fix this issue.
Edit:
Here is a simplified version of the problem:
<table style="width: 100%";>
<tr>
<td>row1 col1</td>
<td>row1 col2</td>
<td>row1 col3</td>
</tr>
<tr>
<td >row2 col1</td>
<td colspan="2"><div class="input-group">row2 col2<div class="input-group-addon">row2 col2</div> </div></td>
</tr>
</table>
With the code above, I get the following result on mozilla:
I would like "row2 col2" to be in the immediate right vicinity of "row2col2"
What is the way to do this?

Answer 1

I solved the problem by wrapping input group addons with divs as shown below:
It works fine for Chrome and Mozilla.
<table class="neo-table">
<tr>
<td>Day of final discharge home</td>
<td>
<div class="row" style='margin-bottom: 5px'>
<div style='white-space: nowrap'>
<div class='col-xs-5'>
<div class='col-xs-2'>{{ form_widget(form.mHomeDischargeDay, {'id': 'M_Home_discharge_day', 'attr':{'style':'width:60px'}})}}</div>
</div>
</div>
</div>
</td>
<td><input type="button" value="enter date" onclick="convertDate('M_Home_discharge_day')"></td>
</tr>
<tr>
<td>Weight at final discharge</td>
<td>
<div class="row" style='margin-bottom: 5px'>
<div style='white-space: nowrap'>
<div class='col-xs-5'>
<div class='col-xs-2'><div class="input-group">{{ form_widget(form.mHomeWeight, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">g</div></div></div>
</div>
</div>
</div>
</td>
<td></td>
</tr>
<tr>
<td>Head circumference at final discharge</td>
<td>
<div class="row" style='margin-bottom: 5px'>
<div style='white-space: nowrap'>
<div class='col-xs-5'>
<div class='col-xs-2'><div class="input-group">{{ form_widget(form.mHomeHeadCirc, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">cm</div></div></div>
</div>
</div>
</div>
</td>
<td></td>
</tr>
<tr>
<td>Length at final discharge</td>
<td>
<div class="row" style='margin-bottom: 5px'>
<div style='white-space: nowrap'>
<div class='col-xs-5'>
<div class='col-xs-2'><div class="input-group">{{ form_widget(form.mHomeLength, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">cm</div></div></div>
</div>
</div>
</div>
</td>
<td></td>
</tr>
<tr>
<td>Congenital malformation</td>
<td>{{ form_widget(form.mBdefect)}}</td>
<td colspan="3">{{ form_widget(form.mBdefectSpecific, {'attr':{'style':'width:250px'}})}}</td>
</tr>
<tr>
<td>Enteral feeding at final discharge</td>
<td>{{ form_widget(form.mHomeFeeding)}}</td>
<td></td>
</tr>
</table>