JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
                    <div class="row">
                        <div class="col-12 pb-3 mb-3 block bg-start">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, cum. Illum unde dolorum, quos tempore dicta velit accusamus saepe praesentium fugiat cumque nulla animi ipsa! Earum id beatae, ullam nulla.
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 pb-3 mb-3 block bg-end">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, cum. Illum unde dolorum, quos tempore dicta velit accusamus saepe praesentium fugiat cumque nulla animi ipsa! Earum id beatae, ullam nulla.
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 pb-3 mb-3 block bg-start">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, cum. Illum unde dolorum, quos tempore dicta velit accusamus saepe praesentium fugiat cumque nulla animi ipsa! Earum id beatae, ullam nulla.
                        </div>
                    </div>
                </div>

CSS

.container {
  position: relative;
}

.container:before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: block;
  content: '';
  background-color: rgba(255,0,0,0.5);
}

.block {
  position: relative;
  color: #fff;
}

.block:before {
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: #000;
  content: '';
  display: block;
  width: 200%;
  z-index: -1;
}

.block.bg-start:before {
  left: -100%;
  right: 100%;
}

.block.bg-end:before {
  left: 0;
  right: -100%;
}