How to make a div dynamically move alongside another

Question

So I have two divs representing two lines (a doted and a solid one) and by using php I fetch two numbers. I need to make those numbers be on top and below those lines like this:

CSS:

.outer, .inner, .target {
          height: 14px;
          margin-bottom: 5px;
        }
    
        .outer {
          background-color: #cccccc;
          width: 80%;
          margin: 0 auto;
          position: relative;
          font-size: 10px;
          line-height: 14px;
          font-family: sans-serif;
        }
    
        .inner {
          background-color: <?php echo $color?>;
          position: absolute;
          z-index: 1;
          color: white;
        }
    
        .target {
          background-color: transparent;
          width: 19px;
          position: absolute;
          border-right: 2px dotted black;
          z-index: 2;
          color: black;
          text-align: right;
        }
    
        .solid_line{
          color: black;  
          float: right;
          width: 3px;
          border-right: 3px solid black;
          height: 16px;
        }

    <div class="outer"> 
            <div class="target" style="width: calc(<?php echo $bar_width; ?> / 100 * (<?php echo $target; ?> / <?php echo $base; ?> * 100))">
                <div>Target: <?php echo number_format((float)$target, 2, '.', ''); ?>%
                </div>
            </div>                   
            <div class="inner" style=" width: calc(<?php echo $bar_width; ?> / 100 * (<?php echo $avg; ?> / <?php echo $base; ?> * 100))">
                <div class="solid_line">
                    <div><?php echo number_format((float)$avg, 2, '.', ''); ?>%</div>
                </div>
            </div>
        </div>

Right now it looks like this:

Answer 1

Perhaps you could use the css :before and :after selectors for your text, and then just align them with top and left. This also removes the need for some of your div tags you had earlier.

You can test the functionality by just increasing/decreasing the inline width set on the inner and outer elements. The line and text will re-position correctly.

Demo:

.outer,
.inner,
.target {
  height: 14px;
  margin-bottom: 5px;
}
.outer {
  background-color: #cccccc;
  width: 80%;
  margin: 20px auto;
  position: relative;
  font-size: 10px;
  line-height: 14px;
  font-family: sans-serif;
}
.inner {
  background-color: green;
  position: absolute;
  z-index: 1;
  text-align: right;
  border-right: 2px solid black;
}
.inner:after {
  content: '25% ';
  display: inline-block;
  left: 10px;
  position: relative;
  height: 100%;
  top: -14px;
}
.target {
  background-color: transparent;
  width: 19px;
  position: absolute;
  z-index: 2;
  color: black;
  text-align: right;
  border-right: 2px dotted black;
}
.target:after {
  content: 'Target: 50%';
  display: inline-block;
  left: 28px;
  position: relative;
  height: 100%;
  top: 14px;
}
.solid_line {
  color: black;
  float: right;
  width: 3px;
  border-right: 3px solid black;
  height: 16px;
}

<div class="outer">
  <div class="target" style="width: 340px">
  </div>
  <div class="inner" style="width: 170px">
  </div>
</div>

Answer 2

Here you have. Its similar with the answer above.

.outer,
.inner,
.target {
  height: 14px;
  margin-bottom: 5px;
}

.outer {
  background-color: #cccccc;
  width: 80%;
  margin: 0 auto;
  position: relative;
  font-size: 10px;
  line-height: 14px;
  font-family: sans-serif;
  margin-top: 20px;
}

.inner {
  background-color: green;
  position: relative;
  z-index: 1;
  color: white;
  margin-top: -18px;
}

.target {
  background-color: transparent;
  width: 19px;
  position: relative;
  border-right: 2px dotted black;
  z-index: 2;
  color: black;
  text-align: right;
}

.target div {
  position: absolute;
  top: -14px;
  right: 0;
}

.solid_line {
  color: black;
  float: right;
  width: 3px;
  border-right: 3px solid black;
  height: 16px;
}

.solid_line div {
  position: absolute;
  top: -18px;
  right: 0;
}

<div class="outer">
  <div class="target" style="width: 80%">
    <div>Target: 80%
    </div>
  </div>
  <div class="inner" style=" width: 50%">
    <div class="solid_line">
      <div>50%</div>
    </div>
  </div>
</div>