JSFiddle - React, Tailwind, and code Playground
HTML
<div class="copy">
<div class="hero_img"><img src="http://images.apple.com/euro/iphone/from-the-app-store/images/fromtheappstore_hero.png" alt="iPhone">
<div class="caption">Creating an entirely new design meant inventing entirely new technology.</div>
</div>
<p>When we envisioned the new iPhone, we landed on a remarkably thin and light design. But it’s nearly impossible to make a device so thin and so light without sacrificing features or performance.</p>
<p>We could have taken the easy way out and designed something more reasonable and less remarkable. But we didn’t. If the technology didn’t exist, we invented it. If a component wasn’t small enough, we re-imagined it. If convention was standing in the way, we left it behind. The result is iPhone 5: the thinnest, lightest, fastest iPhone ever.</p>
<div class="body_img"><img src="http://images.apple.com/iphone/home/images/a6_hero.png" alt="iPhone Horizontal">
<div class="caption">It's our thinnest display ever. And it's the first of its kind.</div>
</div>
<p>iPhone 5 is just 7.6 millimeters thin. To make that happen, Apple engineers had to think small, component by component. They created a nano-SIM card, which is 44 percent smaller than a micro-SIM. They also developed a unique cellular solution for iPhone 5. The conventional approach to building LTE into a world phone uses two chips — one for voice, one for data. On iPhone 5, both are on a single chip. The intelligent, reversible Lightning connector is 80 percent smaller than the 30-pin connector. The 8MP iSight camera has even more features - like panorama and dynamic low-light mode - yet it's 25 percent smaller. And the new A6 chip is up to 2x faster than the A5 chip but 22 percent smaller. Even with so much inside, iPhone 5 is 20 percent lighter and 18 percent thinner than iPhone 4S.</p>
<p>Making a thinner, lighter iPhone meant even the display had to be thinner. Apple engineers accomplished that by creating the first Retina display with integrated...
CSS
.hero_img {
max-width: 18.750em;
float: right;
margin: 0 0 0.5em 0.5em;
}
.body_img {
max-width: 12.5em;
float: left;
margin: 0.5em 0.5em 0 0;
}
img {
max-width: 100%;
height: auto;
}
.caption {
font-size: 0.688em;
}
p {
margin-bottom: 0.5em;
}
.copy {
max-width: 39em;
background: #e1e1e1;
margin: 1.25em auto 0;
padding: 1em;
}