JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ribbon">
  <div class="front">
    <span>Text</span>
  </div>
  <div class="middle">
    <span>&nbsp;</span>
  </div>
  <div class="back">
    <span>Text</span>
  </div>
</div>

CSS

.ribbon {
  width: 200px;
  display:inline-block;
  margin:0px; //remove any margins to prevent breaking at each element
  box-sizing:border-box; //allow paddings to not interfere with element width 
}

.front {
  float: left;
  display: inline;
  width: 42.5%;
  background: #EA0B1D;
  border-radius: 6px 0px 0px 6px;
}

.middle {
  float: left;
  display: inline;
  width: 15%;
  background: #B1071D;
  
}

.back {
  float: right;
  display: inline;
  width: 42.5%;
  background: #EA0B1D;
  border-radius: 0px 6px 6px 0px;
}

span .front, span .back {
  padding: 15px;
  color: white;
}