title: "grid-template-columns: fit-content(50%) 1fr;" doesn't work as expected
body: <p>My application has an element that contains two range items (title and description). I would like the title width to be larger compared to the description width, but if the title is too large, limit it so that the description also appears.
  My solution (<a href="https://codepen.io/perevezencev/pen/GRqoNxV" rel="nofollow noreferrer">full code here</a>)</p>
  <pre><code>.info {
    display: grid;
    grid-template-columns: fit-content(50%) 1fr;
    overflow: hidden;
    
    margin-bottom: 20px
  }
  </code></pre>
  <p>but this solution have a problem with the case where the title is long and the description is too short.
  <a href="https://i.stack.imgur.com/ZcYdR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZcYdR.png" alt="enter image description here" /></a>
  It works differently in my application. (<a href="https://codepen.io/perevezencev/pen/ZEOQLYo" rel="nofollow noreferrer">code here</a>)
  <a href="https://i.stack.imgur.com/hbh3u.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hbh3u.png" alt="enter image description here" /></a>
  If there is no description, the title width is still 50%.</p>
  <p>How to implement this, maybe there is an easier way?</p>