display: table-cell, border-spacing don't work with buttons?

Question

So, I\'m using display: table-cell to put two buttons next to each other so that if text from one overflows to the next line, both buttons are the same height.

Answer 1

Inserting the button element into a div is a good solution (in your place I would have choose it, too), but if you want to display both button elements side by side with space in between without the help from a div you can try this for your .item class:

.item {
    display: table-cell;
    width: 46%;
    background: aliceBlue;
    border: 1px solid black;
    margin: 1%;
}

Width is reduced to 46% to allow a margin of 1% around every button element. You have a space between them now, and also if you resize the window the second button element won't fall under the first one.

Example: http://jsfiddle.net/codenighter/H7TZU/

Hope it helps.

EDIT: It seems that border-spacing (in fact none of block styling is working) doesn't work with button or input. But it does working with other inline elements like span, h1 or b. So, for input and button the display: table-cell property can't be properly applied (I've changed the width value for button and input and it showed, while for span and b the width remained actually at 50%).

Examples: http://jsfiddle.net/codenighter/HrTZS/