Cannot vertically align float element and surrounding elements

Question

I have a couple of problems regarding floating element alignment, I'm trying to make table cell that has a couple of elements inside. Like text input and then dropdown, and only text input should be resized when user resize browser window. Here, how I do it:

<table style="width: 100%;">
    <tr style="vertical-align: bottom;">
        <td style="white-space: nowrap; width: 20%;">
            <div><span style="float: right; display: block;">
                <select style="display:show;width:60px">
                    <option selected="" value="1">1</option>
                    <option value="2">2</option>
                </select>
                </span> <span style="display: block; overflow: hidden; padding-right: 2px;">
                <input type="text" value="100.0" style="width:100%; text-align:right"/>
            </span></div>
        </td>
    </tr>
</table>

but floating element appears a bit upper that non-floating.

Also I have another case when I have link, then input text field, then dropdown or another link, again, input field should be the only resizible element.

here is the code

<table style="width: 100%;">
    <tr style="vertical-align: bottom;">
        <td style="white-space:nowrap; width: 30%;">
          <span style="display: block; float: left; padding-top: 3px;">
            <a href="return false;"><img width="14" height="14" src=""/>
            </a>&nbsp;
          </span>
          <span style="float: right; display: block; padding-top: 5px;">
        <a href="return false;">&nbsp;?</a>
          </span>
          <span style="display: block; overflow: hidden; padding-right: 2px;">
        <input value=""style="width: 100%;">
          </span>
         </td>
    </tr>
</table>

what in this case, is that non-floating element is upper that the others:

Basically, I need to somehow vertically align floating element in the first sample, so it bottom will be the same as bottom of non-floating element and in the second sample i need to somehow align bottom of non-floating element, so it'll be the same as floating elements.

I'm trying to make it work in ie 7, 8, 9, 10.

Adding paddings will do the trick, but then it'll look ugly in firefox, chrome.

Edit:

Or at least tell me why this can't be done.

Edit2:

Or if the problem is with table tag? So I need use something different (divs). The whole structure is a table with only difference that there are some selects and such a like in cells, so it's very natural to use table here. But, well, if problem is with table, I'll try to recreate it with divs.

Edit3:

Even if I remove table, right floating element in sample 1 is a bit higher. I tried to replace float with padding and absolute positioning, but still it's higher.

Edit4:

For sample 1, if I set display: none for left element, then floating element vertical position becomes normal.

*** UPDATE: Sorry that was my mistake to put bounty on this question, i've already solved my problem.***

Answer 1

Working example: http://jsfiddle.net/qARBL/1/

Before anything - Please, please, PLEASE, don't use inline styling - this is so old school! Use an external CSS stylesheet instead.

Add the following css to your HTML:

1.

<select style="display:show;width: 60px;margin: 0;">
    <option selected="" value="1">1</option>
    <option value="2">2</option>
</select>

2.

<input type="text" value="100.0" style="width:100%; text-align:right;margin: 0;padding: 0;">

Just adjusting the margin and the padding of the two elements above did the trick.