Remove white spaces left after positioning div

I am trying to position a very basic div inline with some text. When I move the div it leaves blank spaces that I can't remove. Would you be kind to guide me with some css tricks for it?

.chord {
  color: orangered;
  font-weight: bold;
  display: inline;
  position: relative;
  top: -20px;
  left: 20px;
}

<br/> Empty
<div class="chord">Bm</div>spaces, what are we living for?<br/><br/> Abandoned
<div class="chord">G</div>places, I guess we know the score <br/>

Fiddle, in case you want to play with it.

https://jsfiddle.net/rondolfo/r3dphgsL/11/

I did search for an answer and I couldn't find it, but I believe it is a very basic problem for someone that is proficient in css.

Use inline-flex instead of inline for the display property; and set the width to 0.

That style will remove the space, but will still show the chord text.

You may also remove the left spacing and add a space before the div.

.chord{
    color: orangered;
    font-weight: bold;
    display: inline-flex;
    position: relative;
    top: -20px;
    width: 0px;
}