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


Here is my code:

<!DOCTYPE html>
<html lang="en">
  <script src=""></script>
  <link href="" 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">
  <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>
  <script src="script.js"></script>

: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;