JSFiddle - React, Tailwind, and code Playground

by Tomalak

HTML

<div class="page">

    <div class="row">
        <div class="box">
            <img src="http://lorempixel.com/200/200/" width="200" height="100" />
            <img src="http://lorempixel.com/100/50/" width="100" height="50" />
        </div>
        <div class="box">
            <p>In IE8 the `float: right;` makes the image container take up the entire page width and pushes down the text box.</p>
        </div>
    </div>
    
    <div class="row">
        <div class="box">
            <img src="http://lorempixel.com/200/200/" width="200" height="100" />
            <img src="http://lorempixel.com/100/50/" width="100" height="50" />
        </div>
        <div class="box">
            <p>This works in IE8.</p>
        </div>
    </div>
    
</div>

CSS

.row {
    clear: both;
}
.row:nth-child(odd) .box {
    float: left;
}
.row:nth-child(even) .box {
    float: right;
}
.row:nth-child(odd) .box img {
    float:right;
    clear:right;
}
.row:nth-child(even) .box img {
    float:left;
    clear:left;
}
.box {
    border: 1px solid green;
    margin: 5px;
    padding: 5px;
}
.box > img {
    display: block;
    margin: 5px;
}
.box p {
    width: 250px;
}

}