JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sort-this-div">
    <p><img src="https://unsplash.it/300/225?image=0"/></p>
    <p><img src="image/3.jpg"/></p>
    <p><img src="image/4.jpg"/></p>
    <p><img src="image/2.jpg"/></p>
</div>

JavaScript

/* as option:
function sort(container) {
    var images = [],
        paragraphs = container.getElementsByTagName('p');        
    while(!!paragraphs.length) {
        var p = paragraphs[0];
        images.push(p.getElementsByTagName('img')[0].getAttribute('src'));
        container.removeChild(p);
    }
    images = images.sort();
    console.log(images);
    for(var i = images.length; i-- > 0;) {
        var p = document.createElement('p'),
            img = document.createElement('img');
            img.src = images[i];
            p.appendChild(img);
        container.appendChild(p);
    }
}*/

function sort(container) {
    var images = [],
        imageSources = [],
        paragraphs = container.getElementsByTagName('p');        
    for(var i = paragraphs.length; i-- > 0;) {
        var img = paragraphs[i].getElementsByTagName('img')[0],
            src = img.getAttribute('src');
        images.push(img);
        imageSources.push(src);
    }
    imageSources = imageSources.sort();
    console.log(imageSources);
    for(var i = imageSources.length; i-- > 0;) {
        images[i].src = imageSources[i];
    }
}
    
var container = document.getElementById('sort-this-div');
sort(container);