Bootstrap Dropdown Button Changes Position

I was following the documentation found here: https://getbootstrap.com/docs/4.1/components/dropdowns/ and added the following dropdown button:

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Example 1</button>
</div>

The issue I'm having is that when the button is clicked on to display the dropdown-menu, the button changes it's position. This happens with both dropdown buttons I have.

Buttons Without Dropdown Clicked

Dropdown Clicked & Button Changed Position Example 1

Dropdown Clicked & Button Changed Position Example 2

You can see example code of this issue occurring: https://codepen.io/danfuentes/pen/MWaYOgz

How can I get it so that the button stays in place with the menu items appearing below it?