<header>
  <h1>CSS field-sizing</h1>
  <p>With a <a href="https://developer.mozilla.org/docs/Web/HTML/Attributes/placeholder">placeholder</a></p>
  <p>The placeholder text <b>is</b> the content.</p>
</header>

<main>
  <section class="with">
    <textarea placeholder="Short."></textarea>

    <input type="text" placeholder="I still grow">
    
    <input type="email" placeholder="areallylongemail@somelongdomain.com">

    <input type="number" placeholder="3.14159265358979323846264338327950288419716939937510">
    
    <br>
    
    <p>No placeholder</p>
    <input type="text">
    <p>Complete collapse. Fix with <code>min-inline-size</code> or <code>min-width</code></p>
  </section>
</main>

@layer demo {
  .with {
    textarea, select, input {
      field-sizing: content;
    }
  }
}

@layer demo.support {
  * {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    block-size: 100%;
    color-scheme: dark light;
  }

  body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;

    display: grid;
    place-content: center;
    gap: 10vmin;
  }
  
  header {
    display: grid;
    gap: .5ch;
    text-align: center;
  }
  
  main {
    display: grid;
    place-content: center;
    place-items: start;
    gap: 10vmin;
    
    @media (width > 800px) {
      grid-auto-flow: column;
    }
  }
  
  section {
    display: grid;
    justify-items: start;
    gap: 2vh;
  }
  
  @layer forms {
    textarea, select, input {
      font: inherit;
    }

    input, textarea {
      line-height: 1.5;
      padding-inline: .75rem;
      padding-block: .5rem;
    }

    select {
      padding: .5rem;
    }
    
    input[type="file"] {
      padding: 0;
    }
  }
}