I'm facing an issue where I have a table cell with a button inside it. When I try to float this button, it not only moves horizontally but also changes its vertical position, shifting to the top of the line. For example:
<table style="width: 100%">
<tr>
<td style="background-color: green;">
<select style="height: 100px;">
<option>Option 1</option>
</select>
<button>One</button>
<button>One</button>
<button style="float: right">Two</button>
</td>
</tr>
<tr>
<td style="background-color: red;">
<select>
<option>Option 1</option>
</select>
<button>One</button>
<button>One</button>
<button style="float: right">Two</button>
</td>
</tr>
</table>
The main issue arises when setting height: 100px. Changing this value always aligns the button with the select control. However, floated buttons consistently end up in the top right corner of the line. I want the floated element to align with the others. My objective is to have the button in the right corner of the table cell.