How can I make the caption responsive?-CodePudding

I'm trying to make an image with an caption on the left-middle. The caption should be always at the left-middle or anywhere on the left side of the image and it's size should be vary with browser size simultaneously. The problem is that when I resize the window than size of the caption won't change and It's position is also not fixed w.r.t the image.

.page-overview{
        width: 100%;
        border: 1px solid black;
    }

    .overview-content img{
        width: 100%;
    }
    
    .caption{
        position: absolute;
        top: 20%;
        left: 18px;
        font-size: 80%;
        font-family: 'Source Sans Pro', sans-serif;
        z-index: 1;
    }
    .caption span{
        display: block;
        margin: 8px 0;
        padding: 10px 17px;
        border-radius: 3px;
        background-color: #00000033;
    }

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>test YOU</title>
  
</head>
<body>

    <!--Here can have other content too-->
    <div >
        <div ><a href="#"><img src="https://images5.alphacoders.com/481/481903.png" alt="Delilious & Yum" height="auto"></a>
            <div >
                <span>Test your best here</span>
                <span>It's Yum