JSFiddle - React, Tailwind, and code Playground

HTML

<td>
  <div class="outer">
    <div class="outerY">
      <div class="yellow">1</div>
      <div class="yellow">2</div>
      <div class="yellow">3</div>
      <div class="yellow">4</div> 
    </div>
    <div class="infoY">11</div>
  </div>
</td>

CSS

.outer {
    display:flex;
    flex-wrap:wrap;
    margin-top:100px;
}

.infoY {

} 

.infoY{
    border: 3px solid #ffc107;
    height: 20px;
     background: #ffc107;
}
.outerY {
    margin-top: 0%;
    border: 3px solid #ffc107;
     width: 74px;
     height: 31px;
     display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
     padding: 2px;
    border-radius: 8px;
     position: relative;
}
 .yellow {
    background-color: #ffc107;
    height: 100%;
    -webkit-box-flex: 1;
    flex: 1;
    border-radius: 1px;
     margin-left: 4px;
}