JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="flex-container">
    <li class="flex-item">
        <div>
            <img height="100px" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Metrostation_Mladost_1.JPG/150px-Metrostation_Mladost_1.JPG">
            <p>This text stays within the image</p>
        </div>
    </li>
    <li class="flex-item">
        <div>
            <img height="100px" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Metrostation_Mladost_1.JPG/150px-Metrostation_Mladost_1.JPG">
            <p>This text sticks out further than the image</p>
        </div>
    </li>
</ul>

CSS

.flex-item {
    border: 1px solid #30b0b0;
    color: #303030;
    text-align: center;
    padding: 5px;
}
.flex-container {
    border: 1px solid #30b0b0;
    display: flex;
    justify-content: space-around;
    list-style: outside none none;
    padding: 5px;
}

JavaScript

$(document).ready(function(){
    $(".flex-item").each(function(){
        var flex = $(this);
        var div = flex.find("div");
        var img = div.find("img");
        div.css("width",img.css("width"));
    });
});