How to align borders on <a> element?

Question

I tried this but box-sizing doesn't work.

Flexbox works but then the text is not vertically centered. So I added align-items: center to the div container, but then the situation is the same as in the beginning.

Pseudo elements don't work either.

I would like a pure CSS solution, but please avoid float solutions.

a {
  color: black;
  text-decoration: none;
  display: inline-block;
}
a:first-child {
  padding: 1em;
  border: 0.2em solid #111;
}
a:last-child {
  padding: 1em;
  color: white;
  background-color: black;
}

<div>
  <a href="#">BTN 01</a>
  <a href="#">BTN 02</a>
</div>

CODEPEN

Answer 1

Here's a quick and easy fix:

You have the black border rule applied to just one box:

a:first-child {  
    padding: 1em;   
    border: 0.2em solid #111;
}

Instead, apply the rule to both boxes:

a {
  color:black;
  text-decoration: none;
  display: inline-block;
  border: 0.2em solid #111;
}
a:first-child {  
  padding:1em;   
}
a:last-child {
  padding: 1em;
  color: white;  
  background-color: black;  
}

<div>
  <a href="#">BTN 01</a>
  <a href="#">BTN 02</a>
</div>