JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
<p>Some unneccesarily short and useless text.</p>
<p><img class="align_right" src="01.jpg" alt="The musician" /></p>
<p>Some more text.</p>
<p><img class="align_right" src="02.jpg" alt="The audience" /></p>
<p>And even more text.</p>    
</div>

CSS

p img {color:#f00;}
div.content {background:#fc0;}
div.image_caption {background:#ccc;}
small {background:#f00; color:#00f; font-size: 10px;}

JavaScript

$(document).ready(function() {
$(".content p img[alt]").each(function() {
var $img = $(this);
var width = $img.width();	
var imgClass = $img.attr('class');
var $div = $("<div />")
.attr('class', 'image_caption ' + imgClass)
.css('width', width + 'px');
$img.wrap($div).removeClass(imgClass);
$div.append($("<small>" + $img.attr('alt') + "</small>")); 
});
});