JSFiddle - React, Tailwind, and code Playground

by huskydawgs

HTML

<article class="clear promo-icon">
    <img alt="Pear" src="http://upload.wikimedia.org/wikipedia/commons/6/61/Alexander_Lucas_10.10.10.jpg" height="150" width="144" class="promo-image">
<p>The pear is native to coastal and mildly temperate regions of the Old World, from western Europe and north Africa east right across Asia. It is a medium-sized tree, reaching 10–17 metres (33–56 ft) tall, often with a tall, narrow crown; a few species are shrubby. The fruit is composed of the receptacle or upper end of the flower-stalk (the so-called calyx tube) greatly dilated. Enclosed within its cellular flesh is the true fruit: five cartilaginous carpels, known colloquially as the "core". From the upper rim of the receptacle are given off the five sepals[vague], the five petals, and the very numerous stamens.</p>
</article>
<article class="clear promo-icon">
    <img alt="Orange" src="http://wallwallhd.com/wp-content/uploads/2014/06/orange-slice-wide-wallpaper.jpg" class="promo-image" height="150" width="144">
     <h2>Orange</h2>

    <p>In ancient Egypt, artists used an orange mineral pigment called realgar for tomb paintings, as well as other uses. It was also used later by Medieval artists for the colouring of manuscripts. Pigments were also made in ancient times from a mineral known as orpiment. Orpiment was an important item of trade in the Roman Empire and was used as a medicine in China although it contains arsenic and is highly toxic. It was also used as a fly poison and to poison arrows. Because of its yellow-orange colour, it was also a favourite with alchemists searching for a way to make gold, both in China and the West.</p>
</article>
<article class="clear promo-icon">
    <img alt="Pineapple" src="http://upload.wikimedia.org/wikipedia/commons/c/cb/Pineapple_and_cross_section.jpg"  height="150" width="144" class="promo-image">
     <h2>Pineapple</h2>

    <p>The pineapple is a herbaceous perennial which grows to 1.0 to 1.5 meters (3.3 to 4.9 ft) tall, although...

CSS

article.promo-icon:nth-child(2n) > img.promo-image {
    float: right;
    margin: 0 0 1em 1em;
}
article.promo-icon:nth-child(2n+1) > img.promo-image {
    float: left;
    margin: 0 1em 1em 0;
}
.clear:after {
    content:"";
    display: table;
    clear: both;
}