JSFiddle - React, Tailwind, and code Playground

by Юрий Литвиненко

HTML

<div class="section">
   <div class="section-container">
     <div class="section-body">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum facilis laborum dolore id voluptate asperiores quis reprehenderit. Dolorum optio expedita adipisci, ratione aut fugit unde voluptatibus voluptas quaerat quae odio ea, harum assumenda beatae saepe veritatis laudantium sint. Sequi iste facere aliquam, officia dignissimos error, pariatur quo numquam laudantium ratione cum soluta ex cupiditate dicta fuga inventore? Debitis aut dignissimos ratione corporis repudiandae consequatur voluptatibus delectus culpa ea temporibus illo accusantium rem aspernatur nemo non incidunt, sed molestias dolorem. Tenetur eveniet commodi fugit deleniti, in culpa hic quasi dolor suscipit ducimus rem laudantium nisi et saepe quidem quae sed beatae.</p>
     </div>
     <div class="section-img">
       <img src="https://images3.alphacoders.com/105/thumb-1920-1050821.jpg" alt="">
     </div>
   </div>
 </div>

CSS

img {
    max-width: 100%;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.section {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-left: 5%;
    padding-right: 5%;

    background: yellow;
}

.section-container {
    padding: 0 0 0 15px;
    display: flex;

    background: blue;
}

.section-body {
    width: 40%;
    align-self: center;

    background: red;
}

.section-img {
    order: -1;
    width: 60%;
}

.section-img img {
    display: block;
}