JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bg">
    <div class="left">Content1</div>
    <div class="right">Content2</div>
</div>

CSS

.bg{
    width:100%;
    height:100px;
    background: #d12ba7; /* Old browsers */
background: -moz-linear-gradient(left,  #d12ba7 31%, #e73827 71%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(31%,#d12ba7), color-stop(71%,#e73827)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #d12ba7 31%,#e73827 71%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #d12ba7 31%,#e73827 71%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #d12ba7 31%,#e73827 71%); /* IE10+ */
background: linear-gradient(to right,  #d12ba7 31%,#e73827 71%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d12ba7', endColorstr='#e73827',GradientType=1 ); /* IE6-9 */
}

.left{
    width:50%;
    height:100px;
    background: green;
    margin-left:100px;
    float:left;
}
.right{
    width:25%;
    height:100px;
    background: blue;
}

.left,
.right{
    display: inline-block;
}