How to auto width a relative element inside of an absolute element

Question

Right now I have an absolute element, so that they're absolute positioned in relation to the bigger element. This works correctly:

.wrapper {
    position: absolute;
    left: 65px;
    top: 6%;
    max-width: 76%;
}

Inside this is up to 3 relative elements (two in example), as I want them to stack as you see in the image (if they have more than one). Which works perfectly.

Code of top box:

/* obtain box */
.obtainbox {
    position: relative;
    left: 61px; 

    background-image: 
        linear-gradient(to bottom, #00e887EA, #BBBBBB00 13px),
        url("tbox2.png");
    background-size: cover;
    color: black;
    text-align: left;
    font-size:40px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left:40px;
    padding-right: 7px;
    z-index: 1;
    margin-bottom: 25px;
        border-bottom-right-radius: 25px;
}

Code of bottom box

/* play box */
.playbox {
    position: relative;
    left: 60px; 
    background-image: 
        linear-gradient(to bottom, #14d5f1EA, #BBBBBB00 13px),
        url("tbox2.png");
    background-size: cover;
    color: black;
    text-align: left;
    font-size:40px;
    padding-top: 7px;
    padding-bottom: 10px;
    padding-left:40px;
    padding-right: 7px;
    z-index: 1;
        border-top-right-radius: 25px;
}

HTML Code

<div class='wrapper'>
    <div class='obtainbox topcard '>
        <div class='lefticon'><img src='ObtainV2_150px.png' style='width:100px'></div>
        <img src='Time_150px.png' style='width:42px; position: relative; top: 9px;'>
    </div>
    <div class='playbox endcard'>
        <div class='lefticon'><img src='Play_150px.png' style='width:100px'></div>
        <img src='Time_150px.png' style='width:42px; position: relative; top: 9px;'> for each play you've used this turn. <i>Includes this.</i>
    </div>
</div>

My problem is I want the top box to have an indepedent width from the bottom box, in this image the box would be padding to the right of the top hourglass, instead of the auto size from the parent.

Example image of it auto sizing correct from parent:

Answer 1

Add width: fit-content; to .obtainbox class.

Codepen: https://codepen.io/manaskhandelwal1/pen/NWRLxQg