JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="m_body">
  <div class="body">
    <div class="f_body">
      <div class="box1"></div>
      <div class="box2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, dolorem nihil. Beatae quia, possimus rem! Neque praesentium deserunt dolores, modi, enim asperiores facilis similique sequi a cupiditate unde numquam officiis?

      </div>
    </div>
    <div class="f_body">
      <div class="box2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, dolorem nihil. Beatae quia, possimus rem! Neque praesentium deserunt dolores, modi, enim asperiores facilis similique sequi a cupiditate unde numquam officiis?

      </div>
      <div class="box1"></div>
    </div>
  </div>
</div>

CSS

body {
  background: black;
}
* {
  box-sizing: border-box;
}
div.m_body {
  width: 100%;
  position: relative;
  padding: 50px 30px;
  background: white;
}
div.m_body:after {
  content: '';
  display: table;
  clear: both;
}
div.body {
  width: 100%;
  position: relative;
}
div.body:after {
  content: '';
  display: table;
  clear: both;
}
div.f_body {
  width: 100%;
  position: relative;
}
div.f_body:after {
  content: '';
  display: table;
  clear: both;
}
div.box1 {
  width: 50%;
  float: left;
  height: 300px;
  position: /* absolute */;
  background: url(https://picsum.photos/1200) no-repeat;
  background-size: cover;
  left: 0;
  top: 0;
  background-position: center;
}
div.box2 {
  width: 50%;
  float: left;
  padding: 20px;
  background: grey;
}