I was wondering if there was a way to have a centered item shift smoothly when its width changes?

In my case, I have a piece of text on the left that stays the same, and the piece of text on the right will change depending on what page you are on. 

```
<div id="title-container">
  <h1 class="inline-header">example.</h1>
  <h1 id="title-category" class="inline-header">start</h1>
</div>

```

The total width of this will change as a result, and it will shift abruptly.

Here is a jsfiddle demonstrating the problem.

<https://jsfiddle.net/sm3j26aa/3/>

I've currently worked around it by just fixing the left side using relative positioning and translates, but if I can get the smooth transition, I would rather do that.

Thanks for any help!