JSFiddle - React, Tailwind, and code Playground
HTML
<svg id="svgC1" width="52.215796" height="257.597148" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(0,257.6) rotate(-90)">
<polyline points="0,6.326886 178.017424,6.326886 178.017424,45.888910 0,45.888910" fill="green"></polyline>
<polyline points="178.017424,7.892542 257.597148,7.892542 257.597148,44.323254 178.017424,44.323254" fill="blue"></polyline>
</g>
</svg>
<svg id="svgC2" width="52.215796" height="257.597148" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(0,257.6) rotate(-90)">
<polyline points="0,6.326886 178.017424,6.326886 178.017424,45.888910 0,45.888910" fill="blue"></polyline>
<polyline points="178.017424,7.892542 257.597148,7.892542 257.597148,44.323254 178.017424,44.323254" fill="green"></polyline>
</g>
</svg>