CSS - Try to match rounded shaded inner div as per the attached image using just CSS

Question

I am trying to simply get the effect shown in the image below using CSS - note I am using the 'Skeleton CSS' framework, I need to alter the inner-row class but when I mess with the opacity the text - I am just trying to get the curved inner box with the 'You have 0...' to appear in the same manner as it does on the image.

 // style in external css file
.inner-row {
  border-radius: 3px;
  background-color: grey;     
}

<div class="panel stats orange sidebar row">
<div class="content">
    <div>            
    <h3>Prize Draw</h3>
        <hr />
        <div class="content">
            <div class="row inner-row">
                <div class="label">
                    You have
                </div>
                <p class="remove-bottom large">2</p>
                <div class="label">
                    prize draw entries
                </div>
                <div class="label">
                    Redeem codes for more entries
                </div>
            </div>
            <a href="/"><button class="see-prizes-btn">See Prizes</button></a>
        </div>
    </div>
</div>

Answer 1

You want to try rgba

background: rgba(192,192,192,0.65);

0.65 is your opacity so try messing with it to get a better transparency.