JSFiddle - React, Tailwind, and code Playground

HTML

<div class="metin">
    <p>
    <img src="http://www.cangelis.com/wp-content/uploads/2013/06/kar-manzarasi.jpg"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec tincidunt quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce lacinia eu risus et imperdiet. Vivamus quis mollis metus. Integer sit amet bibendum enim. Nullam elementum ultrices placerat. Curabitur lobortis, est eu commodo vehicula, lectus dui blandit velit, in consequat dolor diam in nisi. Maecenas accumsan lectus et mattis interdum. Pellentesque varius sed enim a feugiat. Fusce adipiscing faucibus nunc, eu venenatis velit ullamcorper id.
        </p>
</div>

CSS

body, html {
    width: 100%; /* bu iki eleman önce tüm ekranı kaplamalı */
    height: 100%;
}
.metin {
    width: 60%; /* bodynin %60 boyutunda */
    border: 1px solid #ddd;
    font-family: tahoma;
    font-size: 11px;
    padding: 10px;
    /* ortalamak için */
    margin-left: auto;
    margin-right: auto;
    /* resim gereğinden fazla büyüdüğünde şeklin bozulmaması için */
    overflow: auto;
}
.metin img {
    width: 50%; /* kendini .metin'e göre ayarlayacak */
    /* height değeri vermiyorum çünkü kendini orantılayacak */
    float: left; /* yazının soluna almak için */
    margin: 2px;
}