JSFiddle - React, Tailwind, and code Playground

by isherwood

HTML

<section class="flagpole">
    <div class="pole"></div>
    <img class="flag" src="http://placehold.it/150x150" />
     <h2>This is a demonstration of an answer to <a href="http://stackoverflow.com/questions/19770925/floating-an-image-to-the-bottom-right-with-text-wrapping-around/19932895#19932895">a question on Stack Overflow</a></h2>

    <p>Paragraph one. This is paragraph one. Paragraph one. This is paragraph one. Paragraph one. This is paragraph one. Paragraph one. This is paragraph one. Paragraph one. This is paragraph one. Paragraph one. This is paragraph one. Paragraph one. This is paragraph one. Paragraph one. This is paragraph one. Paragraph one. This is paragraph one. Paragraph one. This is paragraph one. Paragraph one. This is paragraph one. Paragraph one. This is paragraph one. Paragraph one. This is paragraph one. Paragraph one. This is paragraph one. Paragraph one. This is paragraph one. Paragraph one. This is paragraph one. Paragraph one. This is paragraph one. Paragraph one. This is paragraph one. Paragraph one. This is paragraph one. Paragraph one. This is paragraph one. Paragraph one. This is paragraph one. Paragraph one. This is paragraph one. Paragraph one. This is paragraph one. Paragraph one. This is paragraph one.</p>
    <p>You're looking at paragraph two. Paragraph two here. You're looking at paragraph two. Paragraph two here. You're looking at paragraph two. Paragraph two here. You're looking at paragraph two. Paragraph two here. You're looking at paragraph two. Paragraph two here. You're looking at paragraph two. Paragraph two here. You're looking at paragraph two. Paragraph two here. You're looking at paragraph two. Paragraph two here. You're looking at paragraph two. Paragraph two here. You're looking at paragraph two. Paragraph two here. You're looking at paragraph two. Paragraph two here. You're looking at paragraph two. Paragraph two here. You're looking at paragraph two. Paragraph two here. You're looking at paragraph two....

CSS

.pole, .flag {
    float: right;
    clear: right;
}
.pole {
    width: 0.1px
}

JavaScript

function setFlag() {
    $('section.flagpole').each(function () {
        var poleHeight = $(this).height() - $(this).find('.flag').height();
        $(this).find('.pole').height(poleHeight);
    });
}

setFlag();

$(window).on('resize', function () {
    setFlag();
});