JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
    This container is narrower than the image.
    <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">
    This container is wider than the image.
    <div class="image-wrapper">
        <img src="http://placehold.it/200x200" />
        <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;
}

img {
    width: 100%;
}

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