JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div class="outer clearfix">
  <div class="left">
    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
  </div>
  <div class="right">
    <p>text text </p>
    <p>text text </p>
    <p>text text </p>
  </div>
</div>

CSS

.outer{
  background:linear-gradient(to right, red 50%, blue 50%);
}
.left{
  float:left;
  width:50%;
}
.right{
  padding-left:50%;
}
.clearfix{
  clear:both;
}
.clearfix:before, .clearfix:after{
  content:"";
  display:table;
  clear:both;
}