Place and scale text onto of responsive image-CodePudding

I want to place text (I plan on dynamically generating this text later, hence why it isn't in the image) over an image (where the white rectangle is) and have the text scale along with the responsive image. I have successfully placed text over the image but I am having trouble keeping it aligned with where it is supposed to be in the image (the white rectangle).

I realize that if I was to make the rectangle in the image in the center this would be easier, however that's not an option in this scenario.

How can I keep this text in the white rectangle and keep it scaled with the image?

Edit: Apologies, the red arrows are placeholders for a mockup I am currently designing.

Thanks

p{
        z-index: 100;
        position: absolute;
        color: black;
        font-size: 24px;
        font-weight: bold;
        left: 150px;
        top: 275px;
    }

<script src="https://cdn.tailwindcss.com"></script>
<div >
    <div >
        <div >
            <img src="https://i.imgur.com/sxnQAi2.png" >
            <p id="text">Dynamic text!</p>
        </div>
        <div >
            <h3 >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
    </div>
</div>

CodePudding user response：

p#text {
    box-shadow: 0 4px 20px 8px #ddd;
    padding: 40px;
    margin: 30px;
    border-radius: 10px;
    max-width: 240px;
    margin: 0 auto;
    text-align: center;
}

 <p id="text">Dynamic text!</p>

CodePudding user response：

    <script src="https://cdn.tailwindcss.com"></script>
    <div >
        <div >
            <div >
                <img src="https://images.unsplash.com/photo-1625838144804-300f3907c110?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" >
                <p id="text" >Dynamic text!</p>
            </div>
        <div >
            <h3 >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
        </div>
    </div>

if you use tailwind css then in parent give relative position and in dynamic text add class position absolute and give transform as I included.