title: Stick div to border of another div so they stay together during resizing
body: <p>How can I stick a Square in the middle of a border of another div? I've tried the following approach:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.cont {
    position: relative;
    background-color: blue;
  }
  
  .square {
    position: absolute;
    height: 50px;
    width: 50px;
    border-radius: 0%;
    background-color: yellow;
    left: -5%;
    top: 25%;
  }
  
  .logoOnTheRight {
    max-height: 100px;
    max-width: 100px;
  }
  
  .logoOnTheRight img {
    width: 100%;
  }
  
  body {
    padding: 50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="cont d-flex flex-row-reverse"&gt;
    &lt;div class="square"&gt;&lt;/div&gt;
    &lt;div class="logoOnTheRight p-2"&gt;
      &lt;img src="https://i.imgur.com/sPuqd31g.jpg" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In fullscreen Square 'sits' on the border as it's supposed to. But when I resize the page square changes position in such way that it doesn't stay on the border. I've noticed that if I specify <code>width</code> in the container <code>cont</code> by <code>px</code> then it works. But I want <code>cont</code> to be <code>100%</code> width. How can I force the Square to stay on the border of <code>cont</code> during page resize?</p>