title: jQuery - set div width equal to height
body: <p>I have a div that will always fill 100% of the browser height. Now I want to set its width to the same value (including screen resizing).</p>
  
  <p>html:</p>
  
  <pre><code>&lt;main&gt;
    &lt;div id="mainCircle"&gt;
    &lt;/div&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>body, html {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  main {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  
  #mainCircle {
    height: 100%;
    border-radius: 50%;
    background-color: gray;
  }
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>$(document).ready(function() {
    $('#mainCircle').width($('#mainCircle').height);
    $(window).resize(function() {
      $('#mainCircle').width($('#mainCircle').height);
    })
  })
  </code></pre>
  
  <p>If I pass in the value for <code>$('#mainCircle').width</code> as a number - for example 100px this will work, but not dynamically. What am I doing wrong?</p>