Counters of buttons are misplaced when changing the `width` or `height`

[vanBrakel]

Goal

I want to change the width and height of buttons, and wrap them in a div (I need this for a CSS translation animation I am using) and align them on the same row.

Problem

When giving a width and height to buttons social, they are misplaced and this cannot be solved by changing the CSS display property.

Code

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/css/compiled-4.7.4.min.css?ver=4.7.4">

<!-- Example div -->
<div class="ml-5 mt-5">
  Example one:
  <div class="example-one">
    <button type="button" class="btn btn-lg btn-so example">
      <i class="fab fa-stack-overflow pr-1"></i>
      <span>Stack Overflow</span>
    </button>
    <span class="counter">22</span>
  </div>
  <div class="example-one">
    <button type="button" class="btn btn-lg btn-so example">
      <i class="fab fa-stack-overflow pr-1"></i>
      <span>Stack Overflow</span>
    </button>
    <span class="counter">22</span>
  </div>
  Example two:<br>
  <div class="example-two">
    <button type="button" class="btn btn-lg btn-so example">
      <i class="fab fa-stack-overflow pr-1"></i>
      <span>Stack Overflow</span>
    </button>
    <span class="counter">22</span>
  </div>
  <br>
  Example three:<br>
  <div class="example-three">
    <button type="button" class="btn btn-lg btn-so example">
      <i class="fab fa-stack-overflow pr-1"></i>
      <span>Stack Overflow</span>
    </button>
    <span class="counter">22</span>
  </div>
  <br><br>
  Example four:<br>
  <div class="example-four">
    <button type="button" class="btn btn-lg btn-so example">
      <i class="fab fa-stack-overflow pr-1"></i>
      <span>Stack Overflow</span>
    </button>
    <span class="counter">22</span>
  </div>
</div>

CSS

/* Counter is misplaced and buttons start on separate rows */
.example-one {
  width: 200px;
  height: 100px;
}

/* Width and height are ignored */
.example-two {
  width: 200px;
  height: 100px;
  display: inline;
}

/* Counter is misplaced */
.example-three {
  width: 200px;
  height: 100px;
  display: inline-block;
}

/* Counter is misplaced */
.example-four {
  width: 200px;
  height: 100px;
  display: flex;
}

Result

jsFiddle DEMO

Question

What CSS properties should I add to the buttons in order to display the counter correctly?

[Martussky]

Hi, we know this issue in MDB package and we will fix that as soon as possible. Best, Marta

[Martussky]

Hi, we fix that in our package and documentation. Please check out our docs page: https://mdbootstrap.com/docs/jquery/components/buttons-social/. Best, Marta