JSFiddle - React, Tailwind, and code Playground

by AlexKhrapal

HTML

<div class="wrapper">
  <div class="col">
    <div class="col-img">1</div>
    <div class="col-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio corporis, quasi fugiat consectetur commodi magnam illum tenetur ratione molestiae! Reprehenderit velit quaerat nam, debitis ullam inventore illum expedita. Facere, perferendis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio corporis, quasi fugiat consectetur commodi magnam illum tenetur ratione molestiae! Reprehenderit velit quaerat nam, debitis ullam inventore illum expedita. Facere, perferendis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio corporis, quasi fugiat consectetur commodi magnam illum tenetur ratione molestiae! Reprehenderit velit quaerat nam, debitis ullam inventore illum expedita. Facere, perferendis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio corporis, quasi fugiat consectetur commodi magnam illum tenetur ratione molestiae! Reprehenderit velit quaerat nam, debitis ullam inventore illum expedita. Facere, perferendis.</div>
  </div>
</div>

SCSS

body {
  margin: 0;
}

.col {
  display: flex;
  max-width: 500px;
  
  .col-img {
    width: 50%;
    background: green;
  }
  
  .col-text {
    width: 50%;
    padding: 20px;
  }
}