Border-right and border-left height not matching the padding on element

Hello,

Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://kit.fontawesome.com/1f5460a8a6.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Stopwatch</title>
</head>
<body>
  <div id="container">
    <p id="timeArea">Blank</p>
    <!-- <i id="pauseButton" class="fas fa-pause fa-2x"></i> -->
    <i id="playButton" class="fas fa-play fa-2x"></i>
    <p id="reset">Reset</p>
  </div>
  <script src="script.js"></script>
</body>
</html>

:root {
  --gray: #CBC4C4;
  --blue: #029DF1;
  --white: #FFF;
  --black: #000;
  --secondBlue: #0089D3;
}

* {
  padding: 0;
  margin: 0;
  font-family: Roboto, sans-serif;
  color: var(--white);
}

#container {
  margin: 100px auto;
  background-color: var(--blue);
  width: 300px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 0px;
}

p, i {
  margin-right: 50px;
}

i {
  border-left: 1px solid var(--gray);
  border-right: 1px solid var(--gray);
  padding: 0px 20px;
  height: inherit;
  color: var(--black);
}

i:hover {
  background-color: var(--secondBlue);
}

I am wanting to matching the height of the borders to the amount of padding I have set for my i element. Here is a jsfiddle visualizing how it looks.

What I have done so far is set the height to 100%, given the container div and i element a box-sizing: border-box property, but they have not worked. How can I proceed?

If you have padding-top and bottom in your container element, you can’t have side borders of child element stretching from top to bottom. Luckily, there’s always a way:

Add at you font awesome element transform: scaleY(1.6);. It will increase its height beyond padding of a parent.

You can move the padding to the icon.

#playButton {
  padding: 10px 20px;
}