title: Placing center of circles with changing radius at corners of div
body: <p>I have created a control in leaflet, consisting of an icon, a number and 2 circles, looking something like this: </p>
  
  <pre><code>-  -  -  -  -  -  -  
  |                 * |
  |ICON   3.2         |
  |                 * |
   -  -  -  -  -  -  -
  </code></pre>
  
  <p>I want the 2 circles in the right upper and lower corner, to have a fixed center position - but as it is now it is simply the corner of the box (that is used to create the circle), that has a fixed position at the corner of the div.</p>
  
  <p>The circles change radius, and I don't mind if they overlap each other or the border of the div. </p>
  
  <p>CSS: </p>
  
  <pre><code>.dot {
      height:10px;
      width: 10px;
      stroke: black;
      stroke-width:1px; 
      border-radius: 50%;
      position: absolute;
  }
  
  div{        
      display:inline-block;
      float:left;
  }
  
  .col1{
      width:20px;
      height:25px;
      display: flex;
      align-items: center;
  }
  
  
  .col2{
      width:25px;
      height:25px;
      display: flex;
      align-items: center;
  }
  
  .col3{
      width:20px;
      height:25px;
      position: relative;
  }
  </code></pre>
  
  <p>JAVASCRIPT/HTML: </p>
  
  <pre><code>//set content of control
  control_object[d.key].setContent(
  '&lt;div class="col1"&gt;' +transport_icons[d.key] + '&lt;/div&gt;
   &lt;div class="col2"&gt; &amp;nbsp;' + (number_of_itches/time_spent).toFixed(2) + '&lt;/div&gt;
   &lt;div class="col3"&gt;
       &lt;div class="dot" style="background-color:green; top: 0px; right: 0px; height:' + 2*green_radius + 'px; width:' + 2*green_radius + 'px"&gt;
       &lt;/div&gt;
       &lt;div class="dot"  style="background-color:red; bottom: 0px; right: 0px; height:' + 2*red_radius + 'px; width:' + 2*red_radius + 'px"&gt;
       &lt;/div&gt;
    &lt;/div&gt;');
  </code></pre>