title: Create rectangle using percentages
body: <p>I have a div with &quot;.container&quot; class. And I need to create a square div inside of it. Also, I would like square div to have its width set depending on container width.</p>
  <p>Ex: If I have 500px width div, I want to have 50px/50px square div. I want to make this with percentages for that div to be responsive.</p>
  <p>What I want:</p>
  <pre><code>   .container{
          .square-div{
              width: 10%;
              // height: 10% from container **width** (to be the same as square-div width) 
          }
      }
  </code></pre>
  <p>So, in this case, I want to set height of .square-div to be equal to its width. (to apply that percentage relative to container width for both dimensions). Let's say container is 500px/200px So, my square-div will have 50px width, but 20px height, if I use percentage for both.</p>
  <p>I can use SCSS if needed</p>