Connecting progress value and <div> tag

Question

I am creating a progress bar.

And I want to create a speech bubble that follows the value.

This is sample.

enter image description here

Here is my code

 body{display: flex; justify-content: center; align-items: center; height: 100vh;}
        progress{ width: 1200px; accent-color: white; background: white; height: 30px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
        progress[value] {-webkit-appearance: none; appearance: none;}
        progress::-moz-progress{ width: 1200px; accent-color: white; background: white; height: 30px;}
        progress::-moz-progress-bar {border-radius: 100px; background: #f9f0f2; background: linear-gradient(to right, rgb(255,255,255), rgba(249, 102, 129, 0.1));}
        progress::-webkit-progress-bar {background: #f9f0f2;border-radius: 100px; position: relative;}
        progress::-webkit-progress-bar::after{position: absolute; content: ""; }
        progress::-webkit-progress-value {border-radius: 100px;background: linear-gradient(to right, rgb(254, 212, 220), rgba(249, 102, 129, 1)); position: relative;}
        progress::-webkit-progress-value::after{position: absolute; content: ""; font-size: 1000px;}
        progress::-moz-progress-value {border-radius: 100px;background: linear-gradient(to right, rgb(254, 212, 220), rgba(249, 102, 129, 1));}
        .barText { width: 279px; margin: 50px auto; border-radius: 60px; background: #f9f0f2; color: #000; padding: 20px; text-align: center; font-weight: 900; font-family: arial; position: relative; top: -200px; left: 350px;}
        .barText:before {content: ""; width: 0px; height: 0px; position: absolute; border-left: 20px solid #f9f0f2; border-right: 20px solid transparent; border-top: 40px solid #f9f0f2; border-bottom: 40px solid transparent; left: 10px; top: 30px; transform: rotate(22deg);}

    <progress value="50" max="100" class="progressBar"></progress>
    <div class="barText"></div>

In my opinion, position is problem.

How can solve this problem?