JSFiddle - React, Tailwind, and code Playground

HTML

<div class="CenterImg">

<div class="temp"><div class="fn">namedkfjdjfdjfsjdfijsdifjdsfdfsddsdf.jpg</div><div class="remove">X</div><div class="imgdiv"><img src="http://th960.photobucket.com/albums/ae89/DarkKitteh/Stuffz/th_Avatars_Funny_Cat_With_Headphones.gif"/></div></div>
    
    <div class="temp"><div class="fn">name.jpg</div><div class="remove">X</div><div class="imgdiv"><img src="http://th960.photobucket.com/albums/ae89/DarkKitteh/Stuffz/th_Avatars_Funny_Cat_With_Headphones.gif"/></div></div>

</div>

CSS

.CenterImg > div
{
    border-style:solid;
    border-width:1px;
    float: left;
}
.CenterImg  div .imgdiv img
{
    vertical-align: middle;
    border: none;
}
.CenterImg  div .imgdiv
{
    vertical-align: middle;
    display: table-cell;
    text-align: center;
    width:  150px;
    height: 150px;
}


.CenterImg > div > .fn
{
    max-width: 138px;
    width: 138px;
    overflow:hidden;
    height: inherit;
    float: left;
}
.remove
{
    float: right;
    text-decoration:underline;
    cursor: pointer;    
}