JSFiddle - React, Tailwind, and code Playground

by robert_schutt

HTML

<div id="divChartContainer">
         
         <div id="divRevenue" class="divChartLine">
         
             <div class="divLbl">
                 <span>Revenue</span>
             </div>
             <div id="divRevenueBar" class="divChartBar">&nbsp;</div>
             <div id="divRevenueAmt" class="divChartAmts">$10,000,000</div>
         
         </div>
         <div id="divGross" class="divChartLine">
         
             <div class="divLbl">
                 <span>Gross Profit</span>
             </div>
             <div id="divGrossBar" class="divChartBar">&nbsp;</div>
             <div id="divGrossAmt" class="divChartAmts">$10,000,000</div>
         
         </div>
         <div id="divMRR" class="divChartLine">
         
             <div class="divLbl">
                 <span>MRR</span>
             </div>
             <div id="divMRRBar" class="divChartBar">&nbsp;</div>
             <div id="divMRRAmt" class="divChartAmts">$10,000,000</div>
         
         </div>
     </div>

CSS

#divChartContainer{
    display: block;
    margin-left: 50px;
    margin-top: 10px;
    width: 1105px;
    border: 1px solid black;
}
.divChartLine{   
    height: 30px;
    margin-bottom: 10px;
}
.divLbl{
   border: 1px solid red;
    display: inline-block;
    width: 120px;
    height: 100%;
    font-size: 120%;
    text-align: right;
    vertical-align: middle;
}
.divLbl span {
  display: block;
  line-height: 30px;
}
.divChartBar{
    display: inline-block;
    width: 840px;
    height: 100%;
    vertical-align: middle;
}
.divChartAmts{
    display: inline-block;
    width: 120px;
    vertical-align: middle;
}
#divRevenueBar{
    background-color: #00B7CE;
}
#divGrossBar{
    background-color: #82CA9C;
}
#divMRRBar{
    background-color: black;
}