JSFiddle - React, Tailwind, and code Playground

by KendoDev

HTML

<p>HTML: </p>
<div class="row1">    
    92-100  <span class="row1righttext"> A </span>
</div>
<div class="row2">
    81-91  <span class="row2righttext"> B </span>
</div>
<br> <p>SVG: </p>
<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">    
    <g>   
      <rect x="0" y="0" height="17" width="80%"
          style="stroke: #006600; fill: #006600"/>
        <text x="2" y="15" font-family="sans-serif" font-size="15px" fill="black">
            92-100    
        </text>
        <text x="230" y="15" font-family="sans-serif" font-size="15px" fill="black">
            A  
        </text>
    </g>
         
        <g>   
      <rect x="0" y="19" height="17" width="120%"
          style="stroke: lightgreen; fill: lightgreen"/>
             <text x="2" y="32" font-family="sans-serif" font-size="15px" fill="black">
            81-91    
        </text>
        <text x="290" y="32" font-family="sans-serif" font-size="15px" fill="black">
            B  
        </text>
    </g>
</svg>

CSS

.row1 {  
   width: 40%;
   background-color: green;
}
.row1righttext {
    float:right;
}
.row2 {  
   width: 50%;
   background-color: lightgreen;
}
.row2righttext {
    float:right;
}