JSFiddle - React, Tailwind, and code Playground

HTML

<div id="body_content">
    <div id="body_header">
        Heading
    </div>
    <div id="body_image_container">
        <div id="body_image">
            <img src="http://i.imgur.com/s6G8n.jpg" width="200" height="200" />
            <div id="body_image_overlay">
                <div id="body_image_caption">
                    Some Text
                </div>
            </div>
        </div>
    </div>
</div>

CSS

#body_content{
    border: solid 1px blue;
    display: inline-block;    
    padding: 5px;
}

#body_header{
    border: solid 1px red;
    font-size: 25px;
    padding: 5px;
}

#body_image{
    position: absolute;
}

#body_image_caption{
    color: white;
    line-height: 30px;
    margin-left: 10px;
}

#body_image_container{
    background: white;
    border: solid 1px black;
    margin-top: 3px;
    padding: 10px;
}

#body_image_overlay{
    background-color: black;
    bottom: 5px;
    display: block;
    height: 30px;
    opacity: 0.85;
    position: absolute;
    width: 100%;    
}