How to Align Div properly

Question

Im trying to align my DIV to form a bullet chart. I created a sample Data that I will used for the bullet chart to become dynamic here is the code:

      {bulletchartdata.map(
        (item,index)=>{
            return(
    <div>
        <div className="satisfactory"style={{width:item.satisfactoryVal,height:20,backgroundColor:'#f2f2f2'}}/> 
            <div className="badcolor"style={{width:item.badVal,height:20,backgroundColor:'#d8d6d6'}}/>
                <div className="measure"stlye={{width:item.performanceVal,height:10,backgroundColor:'#8c8c8c'}}> 
                    <div className="target"style={{width:item.symbolMarker,width:1,height:15,backgroundColor:'#000000'}}>     
            </div>
        </div>
    </div>
            );

        }
    )}

here is the sample DATA That I want to pass in the div rather than declaring it in the CSS:

    export const bulletchartdata = [
    { performanceVal: 100, symbolMarker: 100, badVal: 300, satisfactoryVal: 150}

here is the CSS:(Now I dont want to use this CSS(that is why some line are in "comment") since I'm trying to input all the styles inside the DIV(check the div codes)

    .satisfactory {     
      /* width:300px; */
     /*  height:20px; */
      background-color:#f2f2f2;  /* satisfactory */
      position:relative;
    }


    .badcolor {    
      /* width:160px; */
      /* height:20px; */
      background-color:#d8d6d6; /* badcolor */
      position:relative;
      bottom:0px;
    }


    .measure{  
      width:275px;
      height:7px;
      background-color:#8c8c8c; /* Performance Measure */
      position:inherit;
      right:0px;
      top:9px; 
      bottom:0px;
    }

    .target{   
      width:1px;
     /*  height:20px; */
      background-color:#000000;  /* target */
      position: inherit;
      left:240px;
      right:0px;
      top:-6.5px; 
      bottom:0px;
    }

Here is the Result

I want it to look like this

Answer 1

You will need to use position:absolute for the inner divs...and also change your markup (no need to wrap every div inside) ....

 .satisfactory { position: relative; } .satisfactory div { position: absolute; } 

 <div class="satisfactory" style="background: #f2f2f2;width: 300px;height: 40px;"> <div class="badcolor" style="background-color:#d8d6d6;height:40px;width:150px;"></div> <div class="measure" style="background-color:#8c8c8c;height:10px;width:250px;top:15px"></div> <div class="target" style="background-color:#000000;height:40px;width:1px;left:200px;top:0;"></div> </div>