How do i align button in table display without adding any divs

Question

http://jsfiddle.net/mXbfe/

Im trying to align the button with the input box without adding div tag. Can i do it just by CSS? i tried margin-top and padding-top on the input.submit but it doesnt work?

Here are the CSS:

#outer {
    width: 50%; 
    display: table; /*padding: 1em 0 0; */
    background: green;
}

#inner {
     display: table-cell; 
     /*width: 100%;*/ 
    background: red;
}

input {
    width: 100%; 
    /*padding: .5em 1em;*/
}

Here are the HTML:

<div id='outer'>
    <div id='inner'>
        <label>Eat</label>
        <input type='textbox'></input>
    </div>
    <input class='button_submit' type='submit'></input>
</div>

Answer 1

Change the input in your css to input[type=submit]

Answer 2

Move your display: table and display: table-cell declarations down a level: DEMO

#inner {
    display: table;
}

input, label {
    display: table-cell;
}

.button_submit {
    width: auto;
}

Answer 3

you can make align the divs using display:table property. In your code you haven't apply any stlye for input button field.

Here is a Demo http://jsfiddle.net/kheema/mXbfe/24/

Have a look at this CSS.

#outer {
    width: 50%; 
    display: table; /*padding: 1em 0 0; */
    background: green;
}
#inner {
     display: table-cell; 
     /*width: 100%;*/ 
    background: red;
}
input[type="submit"]{display: table-cell;}