How to change a div's position according to data from database
<p>So I use an api connection to fetch some data. The information I get represents a barlike div with a:</p>

<pre><code>$target = number_format((float)$data-&gt;data[2][32][3], 2, '.', '');
</code></pre>

<p>And an average of an array:</p>

<pre><code>public static function try($data)
        {

            $array = [];
            $sum = 0;
            $path = $data-&gt;data[2];
            foreach($path as $key =&gt; $item){
                if($key &gt; 1 &amp;&amp; isset($item[5])){ 
                    $array[] = (int)$item[5];
                    $sum += (int)$item[5];
                }
            }
            $avg = ($sum / count($array));
            return json_encode(number_format((float)$avg, 2, '.', ''));
        }
</code></pre>

<p>So the target is: 9.33% and the average is 14.77%
I tried to make a function to fill a div (.outer) using another div (.inner) and the target is a third div shaped like a bar (.target). What I try to do is make the .iner div complete a percentage of the .outer div according to the result(in this case 14.77). The problem occurs when the average (.iner div) is higher than the target (which right now is the .outer div width). Right now the .target div is not dynamic, it is placed in the right of the .outer div, the .outer div representing the target. This doesn't work when the average is higher than the target. When this happens I want to make the .target div go behind the .inner div procentually according to how much the average exceeds the target.
CSS:</p>

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

    .outer {
      background-color: #cccccc;
      width: 200px;
      margin: 0 auto;
    }

    .inner {
      background-color: #66a3ff;

    }

    .target {
       background-color: black;
       width: 3px;
       height: 14px;
       float: right;
    }
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div class="outer"&gt; 
        &lt;div class="target"&gt;&lt;/div&gt;                   
        &lt;div class="inner" style="width: &lt;?php echo round( 100 * \Helper::getDataForTry($data)) ?&gt;%;"&gt;&lt;/div&gt;


&lt;/div&gt;
</code></pre>

<p>Function for percentage :</p>

<pre><code>public static function getDataForTry($data)
        {
            $target = number_format((float)$data-&gt;data[2][32][3], 2, '.', '');
            $array = [];
            $sum = 0;
            $path = $data-&gt;data[2];
            foreach($path as $key =&gt; $item){
                if($key &gt; 1 &amp;&amp; isset($item[5])){ 
                    $array[] = (int)$item[5];
                    $sum += (int)$item[5];
                }
            }
            $avg = ($sum / count($array));
            $percent = $avg / $target;
            return json_encode(number_format((float)$percent, 2, '.', ''));
        }
</code></pre>

<p>Image of how the final product should look like:</p>

<p><img src="https://i.stack.imgur.com/ZAaPf.png" alt="image"></p>

<p>In the first case scenario the average exceeds the target
In the second case the target is at the end of the outer div and the inner div procentually changes its width according to how much he has left until he reaches the target (which I already have done).</p>