JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<div class="layout">
    <div class="thumb-wrap">
        <div class="thumb-wrap__inner">
            <img src="https://picsum.photos/200/300
" alt="" class="thumb">
        </div>
    </div>
    <div class="desc">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet numquam fugit cupiditate voluptate quibusdam obcaecati mollitia illum dolores vitae voluptatum, beatae possimus. Dolorum natus laudantium voluptatem distinctio culpa, dolore rerum.
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet numquam fugit cupiditate voluptate quibusdam obcaecati mollitia illum dolores vitae voluptatum, beatae possimus. Dolorum natus laudantium voluptatem distinctio culpa, dolore rerum.
        </p>
    </div>
</div>

SCSS

body {
    padding: 10%;
}

.layout {
    &:after {
        display: table;
        width: 100%;
        content: '';
    }
    .thumb {
        display: block;
        max-width: 100%;
        &-wrap {
            float: left;
            width: 66.6666%;
            &__inner {
                margin-left: 50%;
            }
        }
    }
    .desc {
        float: none;
    }
}