title: Prevent size distortion of table
body: <p>I created a pixel art maker that allows the user to choose a grid size of his or her liking. I added the following CSS to convert it to a two-column layout (along with divs in my HTML), in order to display the panel to the left of the grid:</p>
  
  <pre><code>.column {
    float: left;
    width: 35%;
  }
  
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  </code></pre>
  
  <p>You can view my <a href="https://codepen.io/nataliecardot/pen/MQRxJZ" rel="nofollow noreferrer">CodePen</a> for reference. </p>
  
  <p>However, the default 25 x 25 grid is taller than it is wide. I tried fiddling with <code>width: 35%;</code> but each outcome was distorted. How can I make it a perfect square? </p>