JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//normalize-css.googlecode.com/svn/trunk/normalize.css">
<div class="box_container">
  <div class="img_box">
      <p>jghjh</p>
  </div>
  <div class="content_con">
    <p>jghjh</p><p>jghjh</p><p>jghjh</p> 
  <div>
</div>

CSS

.box_container {
    position: relative;
    z-index: 1;
    width: 100%;   
    background: yellow;
    overflow: hidden;
}
.img_box, .content_con {
   float: left;
   width: 50%;
   position: relative;
}
.img_box > *, .content_con > * {
    padding: 0 10px;
}
.box_container:before {
    background: red;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 50%;
    z-index: -1;
}