title: How to horizontally position div overlapping the right border of a parent div?
body: <p>I have vertically aligned a circle within a rectangle div. Now, I need that circle to be positioned on the right-border of the parent div while also maintaining responsiveness. In other words, if that parent div resizes its width, the circle should remain glued to the right-border. </p>
  
  <p>Here is an example of how I want the circle positioned:
  <a href="https://i.stack.imgur.com/AcCP1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AcCP1.png" alt="enter image description here"></a></p>
  
  <p>Here is a JSFiddle of what I have so far. <a href="https://jsfiddle.net/jqvf8t2L/" rel="nofollow noreferrer">https://jsfiddle.net/jqvf8t2L/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="outer"&gt;
      &lt;span&gt;My Text&lt;/span&gt;
      &lt;div class="circle"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.outer {
      display: flex;
      align-items: center;
      padding: 20px;
      position: relative;
      border: 1px solid black;
      width: 40%;
  }
  
  .circle {
      border: 1px solid blue;
      border-radius: 50%;
      height: 20px;
      width: 20px;
      background-color: white;
  }
  
  span {
      display: flex;
      align-self: flex-start;
  }
  </code></pre>
  
  <p>I have tried putting <code>align-self: flex-end</code> on the <code>circle</code> element and absolutely positioning the <code>circle</code> element to no avail.</p>
  
  <p>Any help would be greatly appreciated!</p>