title: Can't position HTML legend tag with CSS Grid
body: <h2>The Problem</h2>
  <p>I have a form with multiple fieldsets and a legend tag for accessibility reasons. I want the legend tag to be below the input field. Since I am using CSS Grid for the fieldset, the only way to get it working (on firefox) is to give the legend tag an absolute positioning.</p>
  <p>In other browsers, such as Chrome and Edge this does not seem to render properly. What am I doing wrong? Why can't I seem to use CSS Grid to position a legend tag?</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>fieldset {
    display: grid;
    grid-template-columns: minmax(max-content, 12vw) auto;
    grid-template-rows: auto auto;
    
    position: relative;
    padding-bottom: 2em;
  }
  
  fieldset legend {
    position: absolute;
    margin: 0;
    padding: 0;
    
    /**
     * Suggested by user Kamel
     * AFAIK legend is styled a block element by default.
     * It definitely is for Firefox
     */
    display: block;
    
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;fieldset&gt;
  &lt;legend&gt;An accessible description&lt;/legend&gt;
  &lt;label&gt;Field&lt;/label&gt;
  &lt;input type="text"&gt;
  &lt;/fieldset&gt;
  
  &lt;fieldset&gt;
  &lt;legend&gt;An accessible description&lt;/legend&gt;
  &lt;label&gt;Field&lt;/label&gt;
  &lt;input type="text"&gt;
  &lt;/fieldset&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/rAshG.png" rel="nofollow noreferrer">Screenshot in Firefox</a> (this is what I want to achieve)</p>
  <p><a href="https://i.stack.imgur.com/3TCmZ.png" rel="nofollow noreferrer">Screenshot in Chrome</a></p>
  <h2>My Research so far</h2>
  <p>MDN says:</p>
  <blockquote>
  <p>The <code>&lt;legend&gt;</code> element is okay to style, but it can be a bit tricky to control placement of it. By default it is always positioned over the top border of its <code>&lt;fieldset&gt;</code> parent, near the top left corner. To position it somewhere else, for example inside the fieldset somewhere, or near the bottom left corner, you need to rely on positioning.</p>
  </blockquote>
  <p><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms</a></p>
  <p>But it doesn't seem to mention CSS Grid anywhere saying that it wouldn't work. Why shouldn't it? It works with all other elements too.</p>