JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="outer">
    <div class="image-wrapper">
        <img src="http://placehold.it/200x200" class="img-responsive voc_list_preview_img" alt="" title="" />

        <div class="image-legend">The image legend can be a long text with many words in it, if you count them.</div>
    </div>
</div>

<div class="outer2">
    <div class="image-wrapper">
        <img src="http://placehold.it/200x200" class="img-responsive voc_list_preview_img" alt="" title="" />
        <div class="image-legend">The image legend can be a long text with many words in it, if you count them.</div>
    </div>
</div>

CSS

.outer {
    width: 100px;
    
    padding: 20px 0;
    background: #ddf;
}

.outer2 {
    margin-top: 10px;
    width: 300px;
    
    padding: 20px 0;
    background: #ddf;
}

.image-wrapper {
    display: table;
    table-layout: fixed;
    
    padding: 20px 0;
    background: #fdd;
}

.wrapper img {
    display: block;
    width: 100%;
}

.image-legend {
    display: table-caption;
    caption-side: bottom;
}