JSFiddle - React, Tailwind, and code Playground

by Anov Siradj

HTML

<div id='a1'>
        <img src="https://lh3.googleusercontent.com/-kx0cklvaX2A/VBgtKrx6FWI/AAAAAAAAAG4/4ZERNAeA5HI/s931-fcrop64=1,06480000ffc9ffff/pZhc7Fq5oX8.jpg" />

     <div id='a2'>
            <div>Your Text is flexible width</div>
            <hr/>
            <div>other text here</div>
        </div>
    </div>

CSS

html * {
    margin: 0;
}     

body {
    color: #333333;
    font: 11px verdana,arial,helvetica,sans-serif;
}

#a1{
    position: relative;
    margin:10px;
    border:1px solid black;
    overflow:hidden;
}

#a1 img{
        max-width:700px;
}

#a2{
    position: absolute;
    right:5%;
    bottom:5%;
    border:1px solid white;
    color:#fff;
    font-size:2em;
    background:rgba(0,0,0,0.7);
    padding:10px;
}