<textarea></textarea>

<select>
  <option>hi</option>
  <option>short</option>
  <option>medium</option>
  <option>annoyingly long option</option>
</select>

<input type="text" placeholder="This fits the content size">

@import "https://unpkg.com/open-props@2.0.0-beta.5" layer(design.system);
@import "https://unpkg.com/open-props@2.0.0-beta.5/normalize.css" layer(demo.support);
@import "https://unpkg.com/open-props@2.0.0-beta.5/forms.css" layer(demo.support);

@layer demo {
  @supports (field-sizing: content) {
    textarea, select, input {
      field-sizing: content;
    }

    textarea {
      min-block-size: 3lh;
      max-block-size: 80svh;
      min-inline-size: var(--size-content-1);
      max-inline-size: var(--size-content-2);
    }

    select {
      min-inline-size: 5ch;
      padding-inline: var(--size-4) var(--size-9);
    } 
  }
}

@layer demo.support {
  body {
    display: grid;
    align-content: center;
    justify-items: center;
    padding: var(--size-5);
    gap: var(--size-5);
  } 
}