JSFiddle - React, Tailwind, and code Playground

by Himanshu Joshi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">
    
    <div class="parentHeader">
        <div class="labelBlock">Skills & Staffing</div>
        <div class="block"></div>
        <div class="block">
            <div class="first" style="width: 20px;">2</div>
            <div class="second" style="width: 40px;">-4</div>
        </div>
        <div class="block"></div>
    </div>
       
</div>

CSS

.parentHeader{
    overflow: hidden;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 0px;
    padding-left: 0;
    border: 2px solid black;    
    
}
.block{
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border: 1px solid #000;
    list-style: none;
   // background-color: #EAEBEE;
    padding: 10px 5px 5px 1px;
}

.labelBlock{
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 3;
        border: 1px solid #000;
        list-style: none;
       // background-color: #EAEBEE;
        padding: 10px 5px 5px 1px;
}

.first {
  font: 10px sans-serif;
  background-color: #89B3FF;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

.second {
  font: 10px sans-serif;
  background-color: #1C47FF;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}