How to make dynamically change its width according to data from array
<p>So, I have three divs .inner which fills the outer div (a barlike chart if you want), and a target which represents a dotted line. I fetch two datas from an array:
$target = $data->data[2][32][3];</p>

<p>Which is 9.83% in this case. 
and the inner div data is:</p>

<pre><code>$clicks = $data-&gt;data[1][32][3];
</code></pre>

<p>Which is 7.15% in this case.
So I've set the target to width 100% in the outer div.
I am trying to make the .inner div procentually fill the outer div up until it reaches the target. 
CSS:
CSS:</p>

<pre><code>.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;
  width: calc(80% / 100 * &lt;?php $clicks ?&gt;);
  border-right: 2px solid black;
}
.inner:after {
  content: '&lt;?php echo number_format((float)$clicks, 2, '.', ''); ?&gt;%';
  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: &lt;?php echo number_format((float)$target, 2, '.', ''); ?&gt;%';
  display: inline-block;
  left: 28px;
  position: relative;
  height: 100%;
  top: 14px;
}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div class="outer" style="width: "&lt;?php echo $base; ?&gt;"&gt; 
    &lt;div class="target" style="width: 80%"&gt;
    &lt;/div&gt;                   
    &lt;div class="inner" style=" width: calc(&lt;?php echo $bar_width; ?&gt; / 100 * (&lt;?php echo $clicks; ?&gt; / &lt;?php echo $base; ?&gt; * 100))"&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>PHP:</p>

<pre><code>&lt;?php
    $target = $data-&gt;data[2][32][3];
    $bar_width = '80%'; 
    $clicks = $data-&gt;data[1][32][3];
    $base   = max($target, $clicks);

?&gt;
</code></pre>

<p>I've attached some images of how it should look like:
<a href="https://i.stack.imgur.com/O2t40.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/O2t40.png" alt="enter image description here"></a></p>

<p>The problem is that I try to make the target dynamically go backwards on the outer div when the inner exceeded it .inner > .target. Any ideas on how should I accomplish this?</p>