Table Rows have different input lengths - html

Question

I am trying to layout a table (I know a grid might work better but do not feel like changing everything for the 3rd time). I have 2 identical cells but one is smaller than the other. No matter what I do, whether I create a smaller class, or make them equal one will always be bigger than another
.grid td.normal{
width: 100px;
}
.grid td.small{
width: 50px;
}
<tr>
<!--Section Search-->
<td colspan="1" class="normal">
<div class="form-row">
<form name="r" action="section.php" method="get" class="form-labels-on-toptabletry">
<label><span>Section:</span><br></label>
<select name="section">
<option value="">Select</option>
<option value="0">Unknown</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value=8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
</select><br>
<input type="submit" value="Search" class="form-buttons">
</form>
</div>
</td>
<!--Township Search-->
<td colspan="1" class="normal">
<form name="township" action="township.php" method="get" class="form-labels-on-toptabletry">
<label><span>Township:</span><br>
<input type="text" name="township"><br>
<input type="submit" value="Search" class="form-buttons">
</label>
</form>
</td>
<!--TD Search-->
<td colspan="1" class="normal">
<div class="form-row">
<form name="r" action="td.php" method="get" class="form-labels-on-toptabletry">
<label>
<span>Township Direction:</span><br>
<select name="td">
<option value="">Select</option>
<option value="0">Unknown</option>
<option value="N">North</option>
<option value="S">South</option>
</select><br>
</label>
<input type="submit" value="Search" class="form-buttons">
</form>
</div>
</td>
<!--Range Search-->
<td colspan="1" class="small">
<form name="range" action="range.php" method="get" class="form-labels-on-toptabletry">
<label>
<span>Range:</span><br>
<input type="text" name="range"><br>
<input type="submit" value="Search" class="form-buttons">
</label>
</form>
</td>
<!--RD Search-->
<td colspan="1" class="normal">
<div class="form-row">
<form name="rd" action="rd.php" method="get" class="form-labels-on-toptabletry">
<label><span>Range Direction:</span><br>
<select name="rd">
<option value="">Select</option>
<option value="0">Unknown</option>
<option value="W">West</option>
<option value="E">East</option>
</select><br>
</label>
<input type="submit" value="Search" class="form-buttons">
</form>
</div>
</td>
</tr>
On the snippet it looks ok but here is what it looks like when I test it:
Different Size Inputs
Does anybody have any idea why this would be happening?