JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box-media-outer box-media-outer-box">
    <div class="box-media box-media-box">
        <div class="box-media-link-container"><a href="#" class="box-media-link"><img class="box-picture" src="http://placehold.it/100x100/cccccc/ffffff&amp;text=thumb" height="2" /></a>
        </div>
        <div class="box-media-container">
            <a class="box-name" href="#">Attachment Title</a>
            <span class="box-caption">attachment caption</span>
            <span class="box-description">Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo <a href="#">voluptas nulla</a> pariatur?</span>
        </div>
        <div class="box-clear"></div>
    </div>
</div>

CSS

.box-media {
    background-color:yellow;
    padding: 5px;
    -webkit-border-radius:0px;
    -moz-border-radius:0px;
    border-radius:0px;
    border:3px solid black;
    margin-bottom:5px;
}

.box-media-box img {
    -webkit-border-radius:5px !important;
    -moz-border-radius:5px !important;
    border-radius:5px !important;
    border:1px solid black !important;
    padding:3px !important;
}

.box-media-link {
    border:0;
    display:block;
    cursor:pointer;
    margin-right:5px;
}

.box-media-link-container {
    float:left;
}

.box-media-box .box-media-link {
    max-width:75px;
    width:auto;
    height:auto;
}

.box-media img {
    max-width:100%;
    height:auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
    overflow:hidden;
}

.box-media-link .box-picture {
    margin:0;
}

.box-picture {
    border:0;
    display:block;
    background:white;
}