Hardtime trying to make a table with colored lines and elements between

header,
.row {
  display: flex;
}

.col {
  flex: 1;
  padding: 1.2rem 0;
}

.barLeft {
  position:relative;
  border-right: 3px dashed #CCC;
  text-align: right;
}

.barRight {
  position:relative;
}

.barLeft::before, .barRight::before {
  position:absolute;
  content: '';
  top:50%;
  margin-top: -1px; /* half of the border */
  border-top: 2px dotted #CCC;
  left: 0;
  width: 100%;
  height:50%;
  z-index: -1;
}

.barRight span{
  position: relative;
  background-color: red;
  display: inline-block;
  height: 10px;
  margin-left: -1.5px; /* half the vert border */
  z-index: 1;
  border-radius: 0 5px 5px 0;
}

.barLeft span{
  position: relative;
  background-color: blue;
  display: inline-block;
  height: 10px;
  margin-left: -1.5px; /* half the vert border */
  z-index: 1;
  border-radius: 5px 0 0 5px;
  margin-right: -1.5px;
}

<section>
  <div class="row">
    <div class="col">FOOO</div>
    <div class="col">BAR</div>
    <div class="col">GOO</div>
    <div class="col">World</div>
    <div class="col barLeft"><span style="width:10%"></span></div>
    <div class="col barRight"><span style="width:50%"></span></div>
    <div class="col">100</div>
  </div>
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
    <div class="col barLeft"><span style="width:20%"></span></div>
    <div class="col barRight"><span style="width:30%"></span></div>
    <div class="col">7</div>
  </div>  
</section>