unable to vertically align the two buttons at the top

Question

In a table with one row where the first and second column having widths 20% and 60% respectively following is the html in that row of the second column. There is a browse button and a submit button. I want both of them to get vertically aligned at the top. I have mentioned this in css but I do not see the desired result. What could be the reason for this ?

Html snippet :

                <form method="post" action="#">
                 <div id="Files_to_be_shared"> 
                       <input type="file" id="File" name="FileTag" />
                       <input type="submit" value="Share" /> 
                 </div>
                </form>

Corresponding css snippet:

#Files_to_be_shared {
    color:#FFEC94;
    vertical-align:top;
}

This is the output I see (and I have marked where I want it to get placed):

Answer 1

If you are using table then add valign="top" to the td

& add align="center" to align it to the center of the td

DEMO

---

or try this

    #Files_to_be_shared {
      color:#FFEC94;
      vertical-align:top; 
      text-align:center 
    }
    td{
     border:1px solid grey; 
     vertical-align:top;
    }

​

DEMO 2