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

window.addEventListener("load", function () {
    var flexItems = document.querySelectorAll(".flex-item");
    for (var i = 0, l = flexItems.length; i < l; i++) {
        var flex = flexItems[i];
        var div = flex.children[0];
        var img = div.children[0];
        div.style.width = img.width + "px";
    }
});