How to equal height of <select> and <button> element with padding

Question

I want to make both elements 'select' and 'button' have the same height.

JS Fiddle

---

HTML

<select><option>...</option></select><button>Button</button>

CSS

* {
    font-size:100%;
}

select, button {
    border:1px solid gray;
    padding:.4em .6em;
    margin:0;
    //box-sizing:border-box; (did not help...)
}

---

JS Fiddle

Right now it looks like this:

---

But it should look like this:

---

How can I achieve the desired outcome with changing the CSS?

Answer 1

select, button {
    border:1px solid gray;
    margin:0;

    padding:0 .6em; //updated
    height:2.3em; //new
    box-sizing:border-box; //new
}