How to get same height to two sibling buttons

Question

I have two <button> elements inside a <div> element. Other button has a lot of text that is divided into two or more rows, and other has a little text (one row). How can I give the same height for both buttons?

I'm not trying to get a Javascript or jQuery etc-based answer, but a clean and neet css-based answer, and I'm not trying to animate or manipulate thease elements.

possible duplicate of [Set height of
= to height of another
through .css](http://stackoverflow.com/questions/19484544/set-height-of-div-to-height-of-another-div-through-css) — Bladepianist, May 29 '15 at 08:03
@SureshPonnukalai, yes, thank you. You could create an answer based on it. — Tohveli, May 29 '15 at 08:25

score 2 · Accepted Answer · answered May 29 '15 at 09:16

Based on my comments fiddle, you can apply buttons display property to table-cell and achieve the same.

HTML

 <div class="test">
    <button>small text</button>
    <button>this is big text and will go to new line</button>
 </div>

CSS

 .test{display:table;}
 button{width:90px; height:110%; margin:0px 10px; vertical-align:top; display:table-cell;}

DEMO

score -2 · Answer 2 · answered May 29 '15 at 08:09

-2

You can adjust the padding top and bottom. Visit http://www.w3schools.com/css/css_padding.asp

answered May 29 '15 at 08:09

stathisg

13
8

This won't work if your text in the button spans multiple lines – TeeDeJee May 29 '15 at 08:14
you are right, it will work with height property and percentance – stathisg May 29 '15 at 13:21

How to get same height to two sibling buttons

2 Answers2