Как центрировать заголовок с помощью кнопки динамической ширины рядом?

Question

У меня есть зеленый заголовок и два объекта в нем: заголовок и кнопка. Мне нужно отцентрировать заголовок относительно зеленой секции, но он должен реагировать на рост ширины кнопки, сохраняя положение как можно ближе к центру, не перекрывая друг друга. Весь текст должен быть виден. Кнопка может отсутствовать (* ngIf). Текст подписи также может быть другим.

Вы можете изменить структуру HTML. Только css / sass

Смотрите мои попытки решить эту проблему в jsfiddle !

<div class="wrapper">
  <h1 class='title'>
    <span class='title-text'>
      Caption
    </span>
  </h1>

  <button>
    dynamic width
  </button>
</div>

.wrapper {
  display: flex;
  justify-content: space-between;
  background: green;
  padding: 10px;
}

h1 {
  margin: 0 auto;
  height: 40px;
}

Answer 1

Вы должны установить оболочку на

положение: относительное;justify-content: center;

, а затем просто расположите кнопку абсолютно

position: absolute;right: 10px;

Просто измените значение right на желаемый результат.