JSFiddle - React, Tailwind, and code Playground

by goodfriend

HTML

<h1>Image and text</h1>

<h2>1)</h2>
<div class="whole">
        <img class="ib" src="http://www.petfinder.com/wp-content/uploads/2012/11/101418789-cat-panleukopenia-fact-sheet-632x475.jpg" alt="imaghedfg" /><p class="ib">my text is so short I will die my text is so short I will die my text is so short I will die my text is so short I will die my text is so short I will die my text is so short I will die my text is so short I will die my text is so short I will die my text is so short I will die my text is so short I will die my text is so short I will die my text is so short I will die alone</p>
    </div>


<h2>2)</h2>
<p>
<img src="http://www.petfinder.com/wp-content/uploads/2012/11/101418789-cat-panleukopenia-fact-sheet-632x475.jpg" alt="myimg" border="1" width="100" class="leftimg" />
    <p>my text is so short I will die my text is so short I will die my text is so short I will die my text is so short I will die my text is so short I will die my text is so short I will die my text is so short I will die my text is so short I will die my text is so short I will die my text is so short I will die my text is so short I will die my text is so short I will die my text is so short I will die my text is so short I will die my text is so short I will die my text is so short I will die my text is so short I will die my text is so short I will die my text is so short I will die my text is so short I will die my text is so short I will die alone</p>
    
</p>

CSS

.ib{ display:inline-block; vertical-align:top;}
.whole{ vertical-align:top; }

.whole img{width:30%; border: 0;}
.whole p{width:70%; margin:0; padding: 0;}

.leftimg{float:left; margin-right:5px;}