JSFiddle - React, Tailwind, and code Playground

by MasterAlex

HTML

<div id="content">
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <br />
    <img width="400" src="http://image-store.slidesharecdn.com/43866d9a-aadb-11e2-9fdf-22000a93b239-medium.jpg" alt="" /><br />
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <br />
    <img width="200" src="http://image-store.slidesharecdn.com/43866d9a-aadb-11e2-9fdf-22000a93b239-medium.jpg" alt="" /><img width="200" src="http://image-store.slidesharecdn.com/43866d9a-aadb-11e2-9fdf-22000a93b239-medium.jpg" alt="" /><br />
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <br />
</div>

CSS

#content {
    width: 100%;
}

.two-img {
    display: inline-block;
    width: 50%;
    text-align: center;
}
.single-img {
    width: 100%;
    text-align: center;
}
}

JavaScript

$(document).ready(function() {
    $('img + img').wrap('<div class="two-img"></div>');
    
    $('.two-img').prev('img').wrap('<div class="two-img"></div>');
    
    $('#content').find('img').each(function() {
        if(!$(this).parent().hasClass('two-img')) {
            $(this).wrap('<div class="single-img"></div>');
        }
    });
});