Vertical buttons with equal width

Question

It's two vertical arrangement buttons. I need them to be of equal width. I don't know:

• what size will on wrap;
• what text will appear on buttons (therefore I can't use pixel width);
• what width will on buttons.

Buttons must be at left. Text on buttons must be center-aligned. I can't use 100% width cause it will not beauty :)

I can't use flexbox and specify width to buttons. And will be cool a solution on pure CSS.

IE8+

Click to copy

.wrap{
    width: 100%;
    border: 1px solid red;
}

.btn{
    height 40px;
    background-color: tomato;
    margin-bottom: 10px;
    display: block;
}

Click to copy

<div class="wrap">
  <button class="btn">small button</button>
  <button class="btn">super long button</button>
</div>

Answer 1

Just make the container inline-block and then the buttons 100% width, that way they will take the width of the largest button:

Click to copy

.wrap{
    display: inline-block;
    border: 1px solid red;
}

.btn{
    height 40px;
    background-color: tomato;
    margin-bottom: 10px;
    display: block;
    width:100%;
}

Click to copy

<div class="wrap">
  <button class="btn">small button</button>
  <button class="btn">super long button</button>
</div>