JSFiddle - React, Tailwind, and code Playground

by Salvador Dali

HTML

<span class="parent">
    <div class='square'>
        <img src="https://pbs.twimg.com/profile_images/604644048/sign051.gif" class="thumbnail-img"/>
    </div>
    <div class='square'>
        <div class="thumbnail-descr"><span>Descr</span><div>
    </div>
</span>

CSS

.square{
    width: 45%;
    height: 200px;
    border: 3px dotted #ddd;
    display:inline-block;
    margin: 0 10px 0 10px
}

.parent{
    width: 100%;
}

.thumbnail-img{
    width: 200px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.thumbnail-descr{
    text-align: center;
    min-height: 10px;
    background-color:red;
    vertical-align: middle;
    font-size: 26pt;
    color: #bbb;
    width:100%;
}