JSFiddle - React, Tailwind, and code Playground

HTML

<div class="prewrapper">
  <div class="wrapper">
    <div class="fill right">Something right</div>
    <div class="fill left">Something left</div>
  </div>
</div>

CSS

.prewrapper {
    width    : 100%;
    position : relative;
    overflow  : hidden;
}

.wrapper {
    margin     : 30px auto;
    width      : 960px;
    background : #ccc;
    height     : 100px;
}
.fill {
    position : absolute;
    width    : 50%;
    background: red;    
}

.fill.left { margin-top: 80px; right : 50%; margin-right: 180px;  /* (960/2 - 300) */ text-align: right;  }
.fill.right { margin-top: 0px; left : 50%; margin-left: 180px;  }