当内部文本覆盖时自动调整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%;
            }