Автоматическая настройка высоты контейнера div при наложении внутреннего текста

Question

Моя проблема - правильно установить CSS, чтобы изменить размер контейнера DIV (индикатор выполнения) в соответствии с внутренним текстом, когда этот текст находится в наложении.

У меня есть индикатор выполнения BS4 с текстом, который я хочу за пределами части прогресса (т. е. прогресс должен быть в фоновом режиме текста).

Здесь скрипка: https://jsfiddle.net/gpcaretti/27xgpL9u/13/
Здесь демонстрационный код (не работает):

<div class="my-div">
    <div class="progress bg-primary my-2">
        <div class="progress-bar progress-bar-striped bg-success py-4" role="progressbar" style="width: 50%;" aria-valuenow="4" aria-valuemin="0" aria-valuemax="20"></div>
        <span>
            this is a very long text that goes outside the progress bar even.
            I would like to have the progress bar height increase automatically to contain the whole text!
        </span>
    </div>
</div>

и это текущий CSS

.my-div {
  background-color: #ccc;
  width: 300px;
  border: 1px solid #999;
  padding: 0.5rem;
}

        .my-div .progress {
          position: relative;
            height: auto !important;
            min-height: 2rem;
            width: 100%;
            border: 1px solid blue;
        }

            .my-div .progress span {
                position: absolute;
                z-index: 2;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                text-align: center;
                width: 100%;
            }