I have three elements of the same height but they are not appearing at the same level AND the text inside is not centered vertically

I have three elements, two buttons and one bolded text element that I want to display at the same height. I also have text in a tag that I want centered. Here is what I see right now:

How can I center this <b> tag and center the text inside of it?

Here is my HTML/React code:

        <div className="ContainerDiv">
          <button className="MinusButton"></button>
          <b className="Counter">100</b>
          <button className="PlusButton"></button>
        </div>

and my css:

.PlusButton {
  background-color: blue;
  width: 100px;
  height: 100px;
  display: inline-block;
}

.Counter {
  display: inline-block;
  background-color: white;
  width: 200px;
  height: 100px;
  text-align: center;
  color: #282c34;
  display: inline-block;
}

.MinusButton {
  background-color: blue;
  width: 100px;
  height: 100px;
  display: inline-block;
}

.ContainerDiv {
  display: inline-block;
  vertical-align: center;
  text-align: center;
}

Add vertical-align: top; to all inline-blocks to align them equally. Otherwise the default vertical alignment of baseline (for inline-blocks) is applied, which can lead to confusion when there is text versus no text inside the different elements (i.e. in your instance the first line of text inside the middle block is aligned to the bottom of the empty inline-blocks at the right and left).

body {
 background: black;
}
.PlusButton {
  background-color: blue;
  width: 100px;
  height: 100px;
  display: inline-block;
  vertical-align: top;
}

.Counter {
  display: inline-block;
  background-color: #fff;
  width: 200px;
  height: 100px;
  text-align: center;
  color: #282c34;
  display: inline-block;
  vertical-align: top;
}

.MinusButton {
  background-color: blue;
  width: 100px;
  height: 100px;
  display: inline-block;
  vertical-align: top;
}

.ContainerDiv {
  display: inline-block;
  vertical-align: center;
  text-align: center;
}

<div class="ContainerDiv">
  <button class="MinusButton"></button>
  <b class="Counter">100</b>
  <button class="PlusButton"></button>
</div>