Вставка элемента (div) перед центрированным элементом (div)

Question

У меня есть фиксированная ширина div с центрированным текстом

 --------Centered Text--------

Я хотел бы добавить еще один div с текстом, выровненным по правому краю, прямо перед центрированным div.

 This is Centered Text------

EDIT : Я обновил код jsfiddle, чтобы он не оставался в таком дезориентированном состоянии.

Я пробовал много разных подходов и в итоге выложил грязный пример. Код ниже показывает, что я пытаюсь сделать.

<div class="text-entry" style="
                          display:flex;
                          justify-content: center;
                          background-color:grey;
                          ">
                           
<div style="display:inline-block; width:100px; text-align:right; background-color:red;">My-</div>
   <div style="background-color:white; ">Text</div>
   <div style="display:inline-block; width:100px;"></div>
   
</div>

<!--- ------------------- -->

<div class="text-entry" style="background-color:grey;text-align:center;">

   <div style="display:inline-block; background-color:white; ">
 Text
  </div>
</div>

Мой вопрос: как правильно реализовать это вместо использования двух встроенных блоков фиксированной ширины?

* Извините за отсутствие навыков. Я занимаюсь этим как хобби, а не профессионально. Спасибо вам за помощь. Я гуглил до приезда сюда.