Open demo

CSS code

HTML 
<div><span class="lbl">Main column: a slot 420px or wider</span>
<section class="mx" data-mx aria-labelledby="mx-h-a">
  <h2 class="mx-h" id="mx-h-a">3 comments on “Container queries in production”</h2>
  <ol class="mx-list">
    <li>
        <article class="mx-c" aria-label="Comment by Yara Haddad">
          <span class="mx-av c1" aria-hidden="true">YH</span>
          <p class="mx-head"><b class="mx-name">Yara Haddad</b><time class="mx-time" datetime="2026-10-19T10:05">2 hours ago</time><span class="mx-replying">Replying</span></p>
          <p class="mx-text">We moved our pricing cards to container queries last month. The same component now fits the sidebar, the modal and the main grid with no overrides.</p>
          <div class="mx-acts">
            <label class="mx-like"><input class="mx-like-i" type="checkbox" checked><svg class="mx-heart" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-9.2-8.6C1.3 8.4 3.2 5 6.6 5c2.1 0 3.6 1.2 5.4 3 1.8-1.8 3.3-3 5.4-3 3.4 0 5.3 3.4 3.8 6.4C19 15.6 12 20 12 20Z"/></svg><span class="mx-label">Like</span><span class="mx-sr"> comment by Yara Haddad</span></label>
            <details class="mx-reply" data-to="Yara Haddad">
              <summary class="mx-sum"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5"/><path d="M4 9h10a6 6 0 0 1 6 6v5"/></svg><span class="mx-label">Reply</span><span class="mx-sr"> to Yara Haddad</span></summary>
              <form class="mx-form">
                <label class="mx-sr" for="mx-a-1">Reply to Yara Haddad</label>
                <textarea class="mx-field" id="mx-a-1" rows="1" required placeholder="Write a reply"></textarea>
                <button class="mx-send" type="submit"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12 20 4l-6 16-3-7z"/><path d="M11 13 20 4"/></svg><span class="mx-label">Send</span></button>
              </form>
            </details>
          </div>
        </article>
      <ol class="mx-replies">
        <li><article class="mx-c" aria-label="Comment by Owen Price">
          <span class="mx-av c2" aria-hidden="true">OP</span>
          <p class="mx-head"><b class="mx-name">Owen Price</b><time class="mx-time" datetime="2026-10-19T11:12">1 hour ago</time><span class="mx-replying">Replying</span></p>
          <p class="mx-text">Did you run into container units inside flex children? Our widths collapsed until we added min-width: 0.</p>
          <div class="mx-acts">
            <label class="mx-like"><input class="mx-like-i" type="checkbox"><svg class="mx-heart" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-9.2-8.6C1.3 8.4 3.2 5 6.6 5c2.1 0 3.6 1.2 5.4 3 1.8-1.8 3.3-3 5.4-3 3.4 0 5.3 3.4 3.8 6.4C19 15.6 12 20 12 20Z"/></svg><span class="mx-label">Like</span><span class="mx-sr"> comment by Owen Price</span></label>
            <details class="mx-reply" data-to="Owen Price">
              <summary class="mx-sum"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5"/><path d="M4 9h10a6 6 0 0 1 6 6v5"/></svg><span class="mx-label">Reply</span><span class="mx-sr"> to Owen Price</span></summary>
              <form class="mx-form">
                <label class="mx-sr" for="mx-a-2">Reply to Owen Price</label>
                <textarea class="mx-field" id="mx-a-2" rows="1" required placeholder="Write a reply"></textarea>
                <button class="mx-send" type="submit"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12 20 4l-6 16-3-7z"/><path d="M11 13 20 4"/></svg><span class="mx-label">Send</span></button>
              </form>
            </details>
          </div>
        </article></li>
      </ol>
    </li>
    <li>
        <article class="mx-c" aria-label="Comment by Mina Cho">
          <span class="mx-av c3" aria-hidden="true">MC</span>
          <p class="mx-head"><b class="mx-name">Mina Cho</b><time class="mx-time" datetime="2026-10-19T11:30">40 minutes ago</time><span class="mx-replying">Replying</span></p>
          <p class="mx-text">text-wrap: pretty fixed the lonely last words in our card titles. A one-line change and the whole page looks more deliberate.</p>
          <div class="mx-acts">
            <label class="mx-like"><input class="mx-like-i" type="checkbox"><svg class="mx-heart" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-9.2-8.6C1.3 8.4 3.2 5 6.6 5c2.1 0 3.6 1.2 5.4 3 1.8-1.8 3.3-3 5.4-3 3.4 0 5.3 3.4 3.8 6.4C19 15.6 12 20 12 20Z"/></svg><span class="mx-label">Like</span><span class="mx-sr"> comment by Mina Cho</span></label>
            <details class="mx-reply" data-to="Mina Cho" open>
              <summary class="mx-sum"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5"/><path d="M4 9h10a6 6 0 0 1 6 6v5"/></svg><span class="mx-label">Reply</span><span class="mx-sr"> to Mina Cho</span></summary>
              <form class="mx-form">
                <label class="mx-sr" for="mx-a-3">Reply to Mina Cho</label>
                <textarea class="mx-field" id="mx-a-3" rows="1" required placeholder="Write a reply"></textarea>
                <button class="mx-send" type="submit"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12 20 4l-6 16-3-7z"/><path d="M11 13 20 4"/></svg><span class="mx-label">Send</span></button>
              </form>
            </details>
          </div>
        </article>
    </li>
  </ol>
  <p class="mx-sr" role="status" data-announce></p>
</section></div>

<div><span class="lbl">Sidebar: the same markup at 300px</span>
<section class="mx" data-mx aria-labelledby="mx-h-b">
  <h2 class="mx-h" id="mx-h-b">3 comments on “Container queries in production”</h2>
  <ol class="mx-list">
    <li>
        <article class="mx-c" aria-label="Comment by Yara Haddad">
          <span class="mx-av c1" aria-hidden="true">YH</span>
          <p class="mx-head"><b class="mx-name">Yara Haddad</b><time class="mx-time" datetime="2026-10-19T10:05">2 hours ago</time><span class="mx-replying">Replying</span></p>
          <p class="mx-text">We moved our pricing cards to container queries last month. The same component now fits the sidebar, the modal and the main grid with no overrides.</p>
          <div class="mx-acts">
            <label class="mx-like"><input class="mx-like-i" type="checkbox" checked><svg class="mx-heart" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-9.2-8.6C1.3 8.4 3.2 5 6.6 5c2.1 0 3.6 1.2 5.4 3 1.8-1.8 3.3-3 5.4-3 3.4 0 5.3 3.4 3.8 6.4C19 15.6 12 20 12 20Z"/></svg><span class="mx-label">Like</span><span class="mx-sr"> comment by Yara Haddad</span></label>
            <details class="mx-reply" data-to="Yara Haddad">
              <summary class="mx-sum"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5"/><path d="M4 9h10a6 6 0 0 1 6 6v5"/></svg><span class="mx-label">Reply</span><span class="mx-sr"> to Yara Haddad</span></summary>
              <form class="mx-form">
                <label class="mx-sr" for="mx-b-1">Reply to Yara Haddad</label>
                <textarea class="mx-field" id="mx-b-1" rows="1" required placeholder="Write a reply"></textarea>
                <button class="mx-send" type="submit"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12 20 4l-6 16-3-7z"/><path d="M11 13 20 4"/></svg><span class="mx-label">Send</span></button>
              </form>
            </details>
          </div>
        </article>
      <ol class="mx-replies">
        <li><article class="mx-c" aria-label="Comment by Owen Price">
          <span class="mx-av c2" aria-hidden="true">OP</span>
          <p class="mx-head"><b class="mx-name">Owen Price</b><time class="mx-time" datetime="2026-10-19T11:12">1 hour ago</time><span class="mx-replying">Replying</span></p>
          <p class="mx-text">Did you run into container units inside flex children? Our widths collapsed until we added min-width: 0.</p>
          <div class="mx-acts">
            <label class="mx-like"><input class="mx-like-i" type="checkbox"><svg class="mx-heart" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-9.2-8.6C1.3 8.4 3.2 5 6.6 5c2.1 0 3.6 1.2 5.4 3 1.8-1.8 3.3-3 5.4-3 3.4 0 5.3 3.4 3.8 6.4C19 15.6 12 20 12 20Z"/></svg><span class="mx-label">Like</span><span class="mx-sr"> comment by Owen Price</span></label>
            <details class="mx-reply" data-to="Owen Price">
              <summary class="mx-sum"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5"/><path d="M4 9h10a6 6 0 0 1 6 6v5"/></svg><span class="mx-label">Reply</span><span class="mx-sr"> to Owen Price</span></summary>
              <form class="mx-form">
                <label class="mx-sr" for="mx-b-2">Reply to Owen Price</label>
                <textarea class="mx-field" id="mx-b-2" rows="1" required placeholder="Write a reply"></textarea>
                <button class="mx-send" type="submit"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12 20 4l-6 16-3-7z"/><path d="M11 13 20 4"/></svg><span class="mx-label">Send</span></button>
              </form>
            </details>
          </div>
        </article></li>
      </ol>
    </li>
    <li>
        <article class="mx-c" aria-label="Comment by Mina Cho">
          <span class="mx-av c3" aria-hidden="true">MC</span>
          <p class="mx-head"><b class="mx-name">Mina Cho</b><time class="mx-time" datetime="2026-10-19T11:30">40 minutes ago</time><span class="mx-replying">Replying</span></p>
          <p class="mx-text">text-wrap: pretty fixed the lonely last words in our card titles. A one-line change and the whole page looks more deliberate.</p>
          <div class="mx-acts">
            <label class="mx-like"><input class="mx-like-i" type="checkbox"><svg class="mx-heart" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-9.2-8.6C1.3 8.4 3.2 5 6.6 5c2.1 0 3.6 1.2 5.4 3 1.8-1.8 3.3-3 5.4-3 3.4 0 5.3 3.4 3.8 6.4C19 15.6 12 20 12 20Z"/></svg><span class="mx-label">Like</span><span class="mx-sr"> comment by Mina Cho</span></label>
            <details class="mx-reply" data-to="Mina Cho">
              <summary class="mx-sum"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5"/><path d="M4 9h10a6 6 0 0 1 6 6v5"/></svg><span class="mx-label">Reply</span><span class="mx-sr"> to Mina Cho</span></summary>
              <form class="mx-form">
                <label class="mx-sr" for="mx-b-3">Reply to Mina Cho</label>
                <textarea class="mx-field" id="mx-b-3" rows="1" required placeholder="Write a reply"></textarea>
                <button class="mx-send" type="submit"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12 20 4l-6 16-3-7z"/><path d="M11 13 20 4"/></svg><span class="mx-label">Send</span></button>
              </form>
            </details>
          </div>
        </article>
    </li>
  </ol>
  <p class="mx-sr" role="status" data-announce></p>
</section></div>
CSS 
/* Modern CSS comments: :has() shows a Replying state while a native <details> reply form is open and styles the Like checkbox,
   a container query switches between compact and roomy layouts by slot width, the textarea grows with field-sizing: content
   (with a resizable fallback), and comment text uses text-wrap: pretty. */
.mx{--mx-accent:#6d28d9;--mx-accent-dark:#5b21b6;--mx-soft:#efeafd;--mx-ink:#1e1b2e;--mx-muted:#5b5670;--mx-line:#e4e0f2;--mx-heart:#be123c;container:mx/inline-size;padding:14px;border:1px solid var(--mx-line);border-radius:20px;background:#fff;color:var(--mx-ink);font-size:.88rem;line-height:1.5;box-shadow:0 20px 44px -30px rgba(30,27,46,.4)}
@container mx (min-width:420px){.mx{padding:22px;font-size:.94rem}}
.mx :where(ol){list-style:none}
.mx-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:where(.mx) :is(button,textarea){font:inherit;color:inherit}
.mx :where(h2,p,ol){margin:0}
.mx-h{margin-bottom:12px;font-size:1rem;font-weight:700;line-height:1.3;text-wrap:balance}
.mx-list{display:flex;flex-direction:column;gap:10px;margin:0;padding:0}
/* the comment card: :has() shows the replying state while its Reply <details> is open */
.mx-c{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:10px;padding:10px;border:1px solid transparent;border-radius:16px;transition:background-color .2s,border-color .2s}
.mx-c:has(details[open]){border-color:var(--mx-accent);background:rgba(239,234,253,.6)}
.mx-av{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:.62rem;font-weight:700}
.mx .c1{background:#fbcfe8;color:#831843}
.mx .c2{background:#bae6fd;color:#0c4a6e}
.mx .c3{background:#fde68a;color:#713f12}
.mx-head{display:flex;flex-direction:column}
.mx-name{font-weight:700}
.mx-time{color:var(--mx-muted);font-size:.78rem}
.mx-replying{display:none;align-self:flex-start;padding:2px 8px;border-radius:999px;background:var(--mx-accent);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.mx-c:has(details[open]) .mx-replying{display:inline-block}
.mx-text{grid-column:2;margin-top:4px;text-wrap:pretty}
.mx-acts{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:6px}
.mx-like{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 8px;border-radius:999px;color:var(--mx-muted);font-size:.82rem;font-weight:600;cursor:pointer}
.mx-like:hover,.mx-sum:hover{background:var(--mx-soft)}
.mx-like:has(:checked){color:var(--mx-heart)}
.mx-like:has(:checked) .mx-heart{fill:currentColor}
.mx-like:has(:focus-visible){outline:2px solid var(--mx-accent);outline-offset:2px}
.mx-like-i{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.mx-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.mx-reply[open]{flex-basis:100%}
.mx-sum{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 8px;border-radius:999px;color:var(--mx-muted);font-size:.82rem;font-weight:600;list-style:none;cursor:pointer}
.mx-sum::-webkit-details-marker{display:none}
.mx-reply[open]>.mx-sum{background:var(--mx-accent);color:#fff}
.mx-sum:focus-visible{outline:2px solid var(--mx-accent);outline-offset:2px}
.mx-form{display:flex;align-items:flex-end;gap:8px;margin-top:8px}
/* field-sizing grows the textarea with its text; browsers without it get a taller box the reader can resize */
.mx-field{flex:1;min-width:0;min-height:44px;max-height:160px;field-sizing:content;resize:none}
@supports not (field-sizing:content){.mx-field{min-height:5.5em;resize:vertical}}
.mx-replies{display:flex;flex-direction:column;gap:10px;margin:8px 0 0 14px;padding:0 0 0 10px;border-left:2px solid var(--mx-line)}
/* the roomy layout switches on by the width of the slot, not the viewport */
@container mx (min-width:420px){
  .mx-h{margin-bottom:16px;font-size:1.1rem}
  .mx-c{grid-template-columns:40px minmax(0,1fr);column-gap:14px;padding:14px}
  .mx-av{width:40px;height:40px;font-size:.78rem}
  .mx-head{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:8px}
  .mx-label{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .mx-replies{margin-left:20px;padding-left:16px}
}
@media (prefers-reduced-motion:reduce){.mx-c,.mx-send{transition:none}}
.mx-field{padding:10px 12px;border:1.5px solid #8a84a3;border-radius:14px;background:#fff;color:var(--mx-ink);line-height:1.4}
.mx-field::placeholder{color:var(--mx-muted)}
.mx-field:focus{border-color:var(--mx-accent);outline:2px solid transparent;box-shadow:0 0 0 3px rgba(109,40,217,.2)}
.mx-send{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;padding:0 12px;border:0;border-radius:14px;background:var(--mx-accent);color:#fff;font-weight:600;cursor:pointer;transition:background-color .2s,color .2s}
.mx-send:hover{background:var(--mx-accent-dark)}
.mx-send:focus-visible{outline:2px solid var(--mx-accent);outline-offset:2px}
.mx-form:has(textarea:invalid) .mx-send{background:#d9d4ea;color:var(--mx-muted)}
JavaScript 
/* The only script: keep the demo on the page when a reply is sent, and let Esc close an open reply form.
   Opening the form, the Replying state, the Like toggle, the growing textarea and the layouts are all HTML and CSS. */
document.querySelectorAll('[data-mx]').forEach(function (root) {
  var live = root.querySelector('[data-announce]');
  root.addEventListener('submit', function (e) {
    e.preventDefault();
    var details = e.target.closest('details');
    live.textContent = 'Reply to ' + details.dataset.to + ' sent.'; // send it to your backend here
    e.target.reset(); details.open = false; details.querySelector('summary').focus();
  });
  root.addEventListener('keydown', function (e) {
    var details = e.target.closest('details[open]');
    if (e.key === 'Escape' && details) { details.open = false; details.querySelector('summary').focus(); }
  });
});

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Main column: a slot 420px or wider</span>
<section class="card mx" data-mx aria-labelledby="mx-h-a">
  <h2 class="mx-h" id="mx-h-a">3 comments on “Container queries in production”</h2>
  <ol class="list-unstyled mx-list">
    <li>
        <article class="mx-c" aria-label="Comment by Yara Haddad">
          <span class="mx-av c1" aria-hidden="true">YH</span>
          <p class="mx-head"><b class="mx-name">Yara Haddad</b><time class="mx-time" datetime="2026-10-19T10:05">2 hours ago</time><span class="badge mx-replying">Replying</span></p>
          <p class="mx-text">We moved our pricing cards to container queries last month. The same component now fits the sidebar, the modal and the main grid with no overrides.</p>
          <div class="mx-acts">
            <label class="mx-like"><input class="mx-like-i" type="checkbox" checked><svg class="mx-heart" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-9.2-8.6C1.3 8.4 3.2 5 6.6 5c2.1 0 3.6 1.2 5.4 3 1.8-1.8 3.3-3 5.4-3 3.4 0 5.3 3.4 3.8 6.4C19 15.6 12 20 12 20Z"/></svg><span class="mx-label">Like</span><span class="visually-hidden"> comment by Yara Haddad</span></label>
            <details class="mx-reply" data-to="Yara Haddad">
              <summary class="mx-sum"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5"/><path d="M4 9h10a6 6 0 0 1 6 6v5"/></svg><span class="mx-label">Reply</span><span class="visually-hidden"> to Yara Haddad</span></summary>
              <form class="mx-form">
                <label class="visually-hidden" for="mx-a-1">Reply to Yara Haddad</label>
                <textarea class="form-control mx-field" id="mx-a-1" rows="1" required placeholder="Write a reply"></textarea>
                <button class="btn mx-send" type="submit"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12 20 4l-6 16-3-7z"/><path d="M11 13 20 4"/></svg><span class="mx-label">Send</span></button>
              </form>
            </details>
          </div>
        </article>
      <ol class="list-unstyled mx-replies">
        <li><article class="mx-c" aria-label="Comment by Owen Price">
          <span class="mx-av c2" aria-hidden="true">OP</span>
          <p class="mx-head"><b class="mx-name">Owen Price</b><time class="mx-time" datetime="2026-10-19T11:12">1 hour ago</time><span class="badge mx-replying">Replying</span></p>
          <p class="mx-text">Did you run into container units inside flex children? Our widths collapsed until we added min-width: 0.</p>
          <div class="mx-acts">
            <label class="mx-like"><input class="mx-like-i" type="checkbox"><svg class="mx-heart" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-9.2-8.6C1.3 8.4 3.2 5 6.6 5c2.1 0 3.6 1.2 5.4 3 1.8-1.8 3.3-3 5.4-3 3.4 0 5.3 3.4 3.8 6.4C19 15.6 12 20 12 20Z"/></svg><span class="mx-label">Like</span><span class="visually-hidden"> comment by Owen Price</span></label>
            <details class="mx-reply" data-to="Owen Price">
              <summary class="mx-sum"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5"/><path d="M4 9h10a6 6 0 0 1 6 6v5"/></svg><span class="mx-label">Reply</span><span class="visually-hidden"> to Owen Price</span></summary>
              <form class="mx-form">
                <label class="visually-hidden" for="mx-a-2">Reply to Owen Price</label>
                <textarea class="form-control mx-field" id="mx-a-2" rows="1" required placeholder="Write a reply"></textarea>
                <button class="btn mx-send" type="submit"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12 20 4l-6 16-3-7z"/><path d="M11 13 20 4"/></svg><span class="mx-label">Send</span></button>
              </form>
            </details>
          </div>
        </article></li>
      </ol>
    </li>
    <li>
        <article class="mx-c" aria-label="Comment by Mina Cho">
          <span class="mx-av c3" aria-hidden="true">MC</span>
          <p class="mx-head"><b class="mx-name">Mina Cho</b><time class="mx-time" datetime="2026-10-19T11:30">40 minutes ago</time><span class="badge mx-replying">Replying</span></p>
          <p class="mx-text">text-wrap: pretty fixed the lonely last words in our card titles. A one-line change and the whole page looks more deliberate.</p>
          <div class="mx-acts">
            <label class="mx-like"><input class="mx-like-i" type="checkbox"><svg class="mx-heart" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-9.2-8.6C1.3 8.4 3.2 5 6.6 5c2.1 0 3.6 1.2 5.4 3 1.8-1.8 3.3-3 5.4-3 3.4 0 5.3 3.4 3.8 6.4C19 15.6 12 20 12 20Z"/></svg><span class="mx-label">Like</span><span class="visually-hidden"> comment by Mina Cho</span></label>
            <details class="mx-reply" data-to="Mina Cho" open>
              <summary class="mx-sum"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5"/><path d="M4 9h10a6 6 0 0 1 6 6v5"/></svg><span class="mx-label">Reply</span><span class="visually-hidden"> to Mina Cho</span></summary>
              <form class="mx-form">
                <label class="visually-hidden" for="mx-a-3">Reply to Mina Cho</label>
                <textarea class="form-control mx-field" id="mx-a-3" rows="1" required placeholder="Write a reply"></textarea>
                <button class="btn mx-send" type="submit"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12 20 4l-6 16-3-7z"/><path d="M11 13 20 4"/></svg><span class="mx-label">Send</span></button>
              </form>
            </details>
          </div>
        </article>
    </li>
  </ol>
  <p class="visually-hidden" role="status" data-announce></p>
</section></div>

<div><span class="lbl">Sidebar: the same markup at 300px</span>
<section class="card mx" data-mx aria-labelledby="mx-h-b">
  <h2 class="mx-h" id="mx-h-b">3 comments on “Container queries in production”</h2>
  <ol class="list-unstyled mx-list">
    <li>
        <article class="mx-c" aria-label="Comment by Yara Haddad">
          <span class="mx-av c1" aria-hidden="true">YH</span>
          <p class="mx-head"><b class="mx-name">Yara Haddad</b><time class="mx-time" datetime="2026-10-19T10:05">2 hours ago</time><span class="badge mx-replying">Replying</span></p>
          <p class="mx-text">We moved our pricing cards to container queries last month. The same component now fits the sidebar, the modal and the main grid with no overrides.</p>
          <div class="mx-acts">
            <label class="mx-like"><input class="mx-like-i" type="checkbox" checked><svg class="mx-heart" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-9.2-8.6C1.3 8.4 3.2 5 6.6 5c2.1 0 3.6 1.2 5.4 3 1.8-1.8 3.3-3 5.4-3 3.4 0 5.3 3.4 3.8 6.4C19 15.6 12 20 12 20Z"/></svg><span class="mx-label">Like</span><span class="visually-hidden"> comment by Yara Haddad</span></label>
            <details class="mx-reply" data-to="Yara Haddad">
              <summary class="mx-sum"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5"/><path d="M4 9h10a6 6 0 0 1 6 6v5"/></svg><span class="mx-label">Reply</span><span class="visually-hidden"> to Yara Haddad</span></summary>
              <form class="mx-form">
                <label class="visually-hidden" for="mx-b-1">Reply to Yara Haddad</label>
                <textarea class="form-control mx-field" id="mx-b-1" rows="1" required placeholder="Write a reply"></textarea>
                <button class="btn mx-send" type="submit"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12 20 4l-6 16-3-7z"/><path d="M11 13 20 4"/></svg><span class="mx-label">Send</span></button>
              </form>
            </details>
          </div>
        </article>
      <ol class="list-unstyled mx-replies">
        <li><article class="mx-c" aria-label="Comment by Owen Price">
          <span class="mx-av c2" aria-hidden="true">OP</span>
          <p class="mx-head"><b class="mx-name">Owen Price</b><time class="mx-time" datetime="2026-10-19T11:12">1 hour ago</time><span class="badge mx-replying">Replying</span></p>
          <p class="mx-text">Did you run into container units inside flex children? Our widths collapsed until we added min-width: 0.</p>
          <div class="mx-acts">
            <label class="mx-like"><input class="mx-like-i" type="checkbox"><svg class="mx-heart" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-9.2-8.6C1.3 8.4 3.2 5 6.6 5c2.1 0 3.6 1.2 5.4 3 1.8-1.8 3.3-3 5.4-3 3.4 0 5.3 3.4 3.8 6.4C19 15.6 12 20 12 20Z"/></svg><span class="mx-label">Like</span><span class="visually-hidden"> comment by Owen Price</span></label>
            <details class="mx-reply" data-to="Owen Price">
              <summary class="mx-sum"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5"/><path d="M4 9h10a6 6 0 0 1 6 6v5"/></svg><span class="mx-label">Reply</span><span class="visually-hidden"> to Owen Price</span></summary>
              <form class="mx-form">
                <label class="visually-hidden" for="mx-b-2">Reply to Owen Price</label>
                <textarea class="form-control mx-field" id="mx-b-2" rows="1" required placeholder="Write a reply"></textarea>
                <button class="btn mx-send" type="submit"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12 20 4l-6 16-3-7z"/><path d="M11 13 20 4"/></svg><span class="mx-label">Send</span></button>
              </form>
            </details>
          </div>
        </article></li>
      </ol>
    </li>
    <li>
        <article class="mx-c" aria-label="Comment by Mina Cho">
          <span class="mx-av c3" aria-hidden="true">MC</span>
          <p class="mx-head"><b class="mx-name">Mina Cho</b><time class="mx-time" datetime="2026-10-19T11:30">40 minutes ago</time><span class="badge mx-replying">Replying</span></p>
          <p class="mx-text">text-wrap: pretty fixed the lonely last words in our card titles. A one-line change and the whole page looks more deliberate.</p>
          <div class="mx-acts">
            <label class="mx-like"><input class="mx-like-i" type="checkbox"><svg class="mx-heart" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-9.2-8.6C1.3 8.4 3.2 5 6.6 5c2.1 0 3.6 1.2 5.4 3 1.8-1.8 3.3-3 5.4-3 3.4 0 5.3 3.4 3.8 6.4C19 15.6 12 20 12 20Z"/></svg><span class="mx-label">Like</span><span class="visually-hidden"> comment by Mina Cho</span></label>
            <details class="mx-reply" data-to="Mina Cho">
              <summary class="mx-sum"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5"/><path d="M4 9h10a6 6 0 0 1 6 6v5"/></svg><span class="mx-label">Reply</span><span class="visually-hidden"> to Mina Cho</span></summary>
              <form class="mx-form">
                <label class="visually-hidden" for="mx-b-3">Reply to Mina Cho</label>
                <textarea class="form-control mx-field" id="mx-b-3" rows="1" required placeholder="Write a reply"></textarea>
                <button class="btn mx-send" type="submit"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12 20 4l-6 16-3-7z"/><path d="M11 13 20 4"/></svg><span class="mx-label">Send</span></button>
              </form>
            </details>
          </div>
        </article>
    </li>
  </ol>
  <p class="visually-hidden" role="status" data-announce></p>
</section></div>
CSS 
/* Modern CSS comments on Bootstrap: a .card with a .form-control textarea and a .btn. :has() shows a Replying state while the
   native <details> reply form is open and styles the Like checkbox, a container query switches layouts by slot width,
   the textarea grows with field-sizing: content (with a resizable fallback), and comment text uses text-wrap: pretty. */
.mx{--mx-accent:#6d28d9;--mx-accent-dark:#5b21b6;--mx-soft:#efeafd;--mx-ink:#1e1b2e;--mx-muted:#5b5670;--mx-line:#e4e0f2;--mx-heart:#be123c;--bs-card-border-color:var(--mx-line);--bs-card-border-radius:20px;--bs-card-color:var(--mx-ink);container:mx/inline-size;padding:14px;font-size:.88rem;line-height:1.5;box-shadow:0 20px 44px -30px rgba(30,27,46,.4)}
@container mx (min-width:420px){.mx{padding:22px;font-size:.94rem}}
.mx :where(h2,p,ol){margin:0}
.mx-h{margin-bottom:12px;font-size:1rem;font-weight:700;line-height:1.3;text-wrap:balance}
.mx-list{display:flex;flex-direction:column;gap:10px;margin:0;padding:0}
/* the comment card: :has() shows the replying state while its Reply <details> is open */
.mx-c{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:10px;padding:10px;border:1px solid transparent;border-radius:16px;transition:background-color .2s,border-color .2s}
.mx-c:has(details[open]){border-color:var(--mx-accent);background:rgba(239,234,253,.6)}
.mx-av{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:.62rem;font-weight:700}
.mx .c1{background:#fbcfe8;color:#831843}
.mx .c2{background:#bae6fd;color:#0c4a6e}
.mx .c3{background:#fde68a;color:#713f12}
.mx-head{display:flex;flex-direction:column}
.mx-name{font-weight:700}
.mx-time{color:var(--mx-muted);font-size:.78rem}
.mx-replying{display:none;align-self:flex-start;padding:2px 8px;border-radius:999px;background:var(--mx-accent);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.mx-c:has(details[open]) .mx-replying{display:inline-block}
.mx-text{grid-column:2;margin-top:4px;text-wrap:pretty}
.mx-acts{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:6px}
.mx-like{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 8px;border-radius:999px;color:var(--mx-muted);font-size:.82rem;font-weight:600;cursor:pointer}
.mx-like:hover,.mx-sum:hover{background:var(--mx-soft)}
.mx-like:has(:checked){color:var(--mx-heart)}
.mx-like:has(:checked) .mx-heart{fill:currentColor}
.mx-like:has(:focus-visible){outline:2px solid var(--mx-accent);outline-offset:2px}
.mx-like-i{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.mx-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.mx-reply[open]{flex-basis:100%}
.mx-sum{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 8px;border-radius:999px;color:var(--mx-muted);font-size:.82rem;font-weight:600;list-style:none;cursor:pointer}
.mx-sum::-webkit-details-marker{display:none}
.mx-reply[open]>.mx-sum{background:var(--mx-accent);color:#fff}
.mx-sum:focus-visible{outline:2px solid var(--mx-accent);outline-offset:2px}
.mx-form{display:flex;align-items:flex-end;gap:8px;margin-top:8px}
/* field-sizing grows the textarea with its text; browsers without it get a taller box the reader can resize */
.mx-field{flex:1;min-width:0;min-height:44px;max-height:160px;field-sizing:content;resize:none}
@supports not (field-sizing:content){.mx-field{min-height:5.5em;resize:vertical}}
.mx-replies{display:flex;flex-direction:column;gap:10px;margin:8px 0 0 14px;padding:0 0 0 10px;border-left:2px solid var(--mx-line)}
/* the roomy layout switches on by the width of the slot, not the viewport */
@container mx (min-width:420px){
  .mx-h{margin-bottom:16px;font-size:1.1rem}
  .mx-c{grid-template-columns:40px minmax(0,1fr);column-gap:14px;padding:14px}
  .mx-av{width:40px;height:40px;font-size:.78rem}
  .mx-head{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:8px}
  .mx-label{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .mx-replies{margin-left:20px;padding-left:16px}
}
@media (prefers-reduced-motion:reduce){.mx-c,.mx-send{transition:none}}
.mx-field{padding:10px 12px;border:1.5px solid #8a84a3;border-radius:14px;color:var(--mx-ink);font-size:inherit;line-height:1.4}
.mx-field::placeholder{color:var(--mx-muted)}
.mx-field:focus{border-color:var(--mx-accent);box-shadow:0 0 0 3px rgba(109,40,217,.2)}
.mx-send{--bs-btn-padding-x:12px;--bs-btn-padding-y:0;--bs-btn-font-size:inherit;--bs-btn-font-weight:600;--bs-btn-border-width:0;--bs-btn-border-radius:14px;--bs-btn-color:#fff;--bs-btn-bg:var(--mx-accent);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--mx-accent-dark);--bs-btn-active-color:#fff;--bs-btn-active-bg:var(--mx-accent-dark);--bs-btn-focus-box-shadow:none;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;transition:background-color .2s,color .2s}
.mx-send:focus-visible{outline:2px solid var(--mx-accent);outline-offset:2px}
.mx-form:has(textarea:invalid) .mx-send{--bs-btn-bg:#d9d4ea;--bs-btn-color:var(--mx-muted);--bs-btn-hover-bg:#d9d4ea;--bs-btn-hover-color:var(--mx-muted)}
.mx-replying{--bs-badge-padding-x:8px;--bs-badge-padding-y:3px;--bs-badge-font-size:.68rem}
JavaScript 
/* The only script: keep the demo on the page when a reply is sent, and let Esc close an open reply form.
   Opening the form, the Replying state, the Like toggle, the growing textarea and the layouts are all HTML and CSS. */
document.querySelectorAll('[data-mx]').forEach(function (root) {
  var live = root.querySelector('[data-announce]');
  root.addEventListener('submit', function (e) {
    e.preventDefault();
    var details = e.target.closest('details');
    live.textContent = 'Reply to ' + details.dataset.to + ' sent.'; // send it to your backend here
    e.target.reset(); details.open = false; details.querySelector('summary').focus();
  });
  root.addEventListener('keydown', function (e) {
    var details = e.target.closest('details[open]');
    if (e.key === 'Escape' && details) { details.open = false; details.querySelector('summary').focus(); }
  });
});

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#5b5670] uppercase">Main column: a slot 420px or wider</span>
<section class="@container/mx rounded-[20px] border border-mx-line bg-white p-3.5 text-[.88rem] leading-normal text-mx-ink shadow-[0_20px_44px_-30px_rgba(30,27,46,.4)] @min-[420px]/mx:p-[22px] @min-[420px]/mx:text-[.94rem]" data-mx aria-labelledby="mx-h-a">
  <h2 class="mb-3 text-[1rem] leading-[1.3] font-bold text-balance @min-[420px]/mx:mb-4 @min-[420px]/mx:text-[1.1rem]" id="mx-h-a">3 comments on “Container queries in production”</h2>
  <ol class="flex flex-col gap-2.5">
    <li>
        <article class="group/c grid grid-cols-[28px_minmax(0,1fr)] gap-x-2.5 rounded-2xl border border-transparent p-2.5 transition-[background-color,border-color] duration-200 has-[details[open]]:border-mx-accent has-[details[open]]:bg-mx-soft/60 motion-reduce:transition-none @min-[420px]/mx:grid-cols-[40px_minmax(0,1fr)] @min-[420px]/mx:gap-x-3.5 @min-[420px]/mx:p-3.5" aria-label="Comment by Yara Haddad">
          <span class="grid size-7 place-items-center rounded-full text-[.62rem] font-bold @min-[420px]/mx:size-10 @min-[420px]/mx:text-[.78rem] bg-[#fbcfe8] text-[#831843]" aria-hidden="true">YH</span>
          <p class="flex flex-col @min-[420px]/mx:flex-row @min-[420px]/mx:flex-wrap @min-[420px]/mx:items-baseline @min-[420px]/mx:gap-x-2"><b class="font-bold">Yara Haddad</b><time class="text-[.78rem] text-mx-muted" datetime="2026-10-19T10:05">2 hours ago</time><span class="hidden self-start rounded-full bg-mx-accent px-2 py-0.5 text-[.68rem] font-bold tracking-[.04em] text-white uppercase group-has-[details[open]]/c:inline-block">Replying</span></p>
          <p class="col-start-2 mt-1 text-pretty">We moved our pricing cards to container queries last month. The same component now fits the sidebar, the modal and the main grid with no overrides.</p>
          <div class="col-start-2 mt-1.5 flex flex-wrap items-center gap-1">
            <label class="group/l inline-flex min-h-8 cursor-pointer items-center gap-1.5 rounded-full px-2 text-[.82rem] font-semibold text-mx-muted hover:bg-mx-soft has-checked:text-mx-heart has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-mx-accent"><input class="sr-only" type="checkbox" checked><svg class="group-has-checked/l:fill-current" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-9.2-8.6C1.3 8.4 3.2 5 6.6 5c2.1 0 3.6 1.2 5.4 3 1.8-1.8 3.3-3 5.4-3 3.4 0 5.3 3.4 3.8 6.4C19 15.6 12 20 12 20Z"/></svg><span class="sr-only @min-[420px]/mx:not-sr-only">Like</span><span class="sr-only"> comment by Yara Haddad</span></label>
            <details class="open:basis-full" data-to="Yara Haddad">
              <summary class="inline-flex min-h-8 cursor-pointer list-none items-center gap-1.5 rounded-full px-2 text-[.82rem] font-semibold text-mx-muted hover:bg-mx-soft [details[open]>&]:bg-mx-accent [details[open]>&]:text-white [&::-webkit-details-marker]:hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mx-accent"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5"/><path d="M4 9h10a6 6 0 0 1 6 6v5"/></svg><span class="sr-only @min-[420px]/mx:not-sr-only">Reply</span><span class="sr-only"> to Yara Haddad</span></summary>
              <form class="group/f mt-2 flex items-end gap-2">
                <label class="sr-only" for="mx-a-1">Reply to Yara Haddad</label>
                <textarea class="field-sizing-content max-h-40 min-h-11 min-w-0 flex-1 resize-none rounded-[14px] border-[1.5px] border-[#8a84a3] bg-white px-3 py-2.5 leading-[1.4] text-mx-ink placeholder:text-mx-muted focus:border-mx-accent focus:shadow-[0_0_0_3px_rgba(109,40,217,.2)] focus:outline-2 focus:outline-transparent" id="mx-a-1" rows="1" required placeholder="Write a reply"></textarea>
                <button class="inline-flex h-11 min-w-11 flex-none cursor-pointer items-center justify-center gap-1.5 rounded-[14px] bg-mx-accent px-3 font-semibold text-white transition-colors duration-200 hover:bg-[#5b21b6] group-has-[textarea:invalid]/f:bg-[#d9d4ea] group-has-[textarea:invalid]/f:text-mx-muted motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mx-accent" type="submit"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12 20 4l-6 16-3-7z"/><path d="M11 13 20 4"/></svg><span class="sr-only @min-[420px]/mx:not-sr-only">Send</span></button>
              </form>
            </details>
          </div>
        </article>
      <ol class="mt-2 ml-3.5 flex flex-col gap-2.5 border-l-2 border-mx-line pl-2.5 @min-[420px]/mx:ml-5 @min-[420px]/mx:pl-4">
        <li><article class="group/c grid grid-cols-[28px_minmax(0,1fr)] gap-x-2.5 rounded-2xl border border-transparent p-2.5 transition-[background-color,border-color] duration-200 has-[details[open]]:border-mx-accent has-[details[open]]:bg-mx-soft/60 motion-reduce:transition-none @min-[420px]/mx:grid-cols-[40px_minmax(0,1fr)] @min-[420px]/mx:gap-x-3.5 @min-[420px]/mx:p-3.5" aria-label="Comment by Owen Price">
          <span class="grid size-7 place-items-center rounded-full text-[.62rem] font-bold @min-[420px]/mx:size-10 @min-[420px]/mx:text-[.78rem] bg-[#bae6fd] text-[#0c4a6e]" aria-hidden="true">OP</span>
          <p class="flex flex-col @min-[420px]/mx:flex-row @min-[420px]/mx:flex-wrap @min-[420px]/mx:items-baseline @min-[420px]/mx:gap-x-2"><b class="font-bold">Owen Price</b><time class="text-[.78rem] text-mx-muted" datetime="2026-10-19T11:12">1 hour ago</time><span class="hidden self-start rounded-full bg-mx-accent px-2 py-0.5 text-[.68rem] font-bold tracking-[.04em] text-white uppercase group-has-[details[open]]/c:inline-block">Replying</span></p>
          <p class="col-start-2 mt-1 text-pretty">Did you run into container units inside flex children? Our widths collapsed until we added min-width: 0.</p>
          <div class="col-start-2 mt-1.5 flex flex-wrap items-center gap-1">
            <label class="group/l inline-flex min-h-8 cursor-pointer items-center gap-1.5 rounded-full px-2 text-[.82rem] font-semibold text-mx-muted hover:bg-mx-soft has-checked:text-mx-heart has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-mx-accent"><input class="sr-only" type="checkbox"><svg class="group-has-checked/l:fill-current" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-9.2-8.6C1.3 8.4 3.2 5 6.6 5c2.1 0 3.6 1.2 5.4 3 1.8-1.8 3.3-3 5.4-3 3.4 0 5.3 3.4 3.8 6.4C19 15.6 12 20 12 20Z"/></svg><span class="sr-only @min-[420px]/mx:not-sr-only">Like</span><span class="sr-only"> comment by Owen Price</span></label>
            <details class="open:basis-full" data-to="Owen Price">
              <summary class="inline-flex min-h-8 cursor-pointer list-none items-center gap-1.5 rounded-full px-2 text-[.82rem] font-semibold text-mx-muted hover:bg-mx-soft [details[open]>&]:bg-mx-accent [details[open]>&]:text-white [&::-webkit-details-marker]:hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mx-accent"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5"/><path d="M4 9h10a6 6 0 0 1 6 6v5"/></svg><span class="sr-only @min-[420px]/mx:not-sr-only">Reply</span><span class="sr-only"> to Owen Price</span></summary>
              <form class="group/f mt-2 flex items-end gap-2">
                <label class="sr-only" for="mx-a-2">Reply to Owen Price</label>
                <textarea class="field-sizing-content max-h-40 min-h-11 min-w-0 flex-1 resize-none rounded-[14px] border-[1.5px] border-[#8a84a3] bg-white px-3 py-2.5 leading-[1.4] text-mx-ink placeholder:text-mx-muted focus:border-mx-accent focus:shadow-[0_0_0_3px_rgba(109,40,217,.2)] focus:outline-2 focus:outline-transparent" id="mx-a-2" rows="1" required placeholder="Write a reply"></textarea>
                <button class="inline-flex h-11 min-w-11 flex-none cursor-pointer items-center justify-center gap-1.5 rounded-[14px] bg-mx-accent px-3 font-semibold text-white transition-colors duration-200 hover:bg-[#5b21b6] group-has-[textarea:invalid]/f:bg-[#d9d4ea] group-has-[textarea:invalid]/f:text-mx-muted motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mx-accent" type="submit"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12 20 4l-6 16-3-7z"/><path d="M11 13 20 4"/></svg><span class="sr-only @min-[420px]/mx:not-sr-only">Send</span></button>
              </form>
            </details>
          </div>
        </article></li>
      </ol>
    </li>
    <li>
        <article class="group/c grid grid-cols-[28px_minmax(0,1fr)] gap-x-2.5 rounded-2xl border border-transparent p-2.5 transition-[background-color,border-color] duration-200 has-[details[open]]:border-mx-accent has-[details[open]]:bg-mx-soft/60 motion-reduce:transition-none @min-[420px]/mx:grid-cols-[40px_minmax(0,1fr)] @min-[420px]/mx:gap-x-3.5 @min-[420px]/mx:p-3.5" aria-label="Comment by Mina Cho">
          <span class="grid size-7 place-items-center rounded-full text-[.62rem] font-bold @min-[420px]/mx:size-10 @min-[420px]/mx:text-[.78rem] bg-[#fde68a] text-[#713f12]" aria-hidden="true">MC</span>
          <p class="flex flex-col @min-[420px]/mx:flex-row @min-[420px]/mx:flex-wrap @min-[420px]/mx:items-baseline @min-[420px]/mx:gap-x-2"><b class="font-bold">Mina Cho</b><time class="text-[.78rem] text-mx-muted" datetime="2026-10-19T11:30">40 minutes ago</time><span class="hidden self-start rounded-full bg-mx-accent px-2 py-0.5 text-[.68rem] font-bold tracking-[.04em] text-white uppercase group-has-[details[open]]/c:inline-block">Replying</span></p>
          <p class="col-start-2 mt-1 text-pretty">text-wrap: pretty fixed the lonely last words in our card titles. A one-line change and the whole page looks more deliberate.</p>
          <div class="col-start-2 mt-1.5 flex flex-wrap items-center gap-1">
            <label class="group/l inline-flex min-h-8 cursor-pointer items-center gap-1.5 rounded-full px-2 text-[.82rem] font-semibold text-mx-muted hover:bg-mx-soft has-checked:text-mx-heart has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-mx-accent"><input class="sr-only" type="checkbox"><svg class="group-has-checked/l:fill-current" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-9.2-8.6C1.3 8.4 3.2 5 6.6 5c2.1 0 3.6 1.2 5.4 3 1.8-1.8 3.3-3 5.4-3 3.4 0 5.3 3.4 3.8 6.4C19 15.6 12 20 12 20Z"/></svg><span class="sr-only @min-[420px]/mx:not-sr-only">Like</span><span class="sr-only"> comment by Mina Cho</span></label>
            <details class="open:basis-full" data-to="Mina Cho" open>
              <summary class="inline-flex min-h-8 cursor-pointer list-none items-center gap-1.5 rounded-full px-2 text-[.82rem] font-semibold text-mx-muted hover:bg-mx-soft [details[open]>&]:bg-mx-accent [details[open]>&]:text-white [&::-webkit-details-marker]:hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mx-accent"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5"/><path d="M4 9h10a6 6 0 0 1 6 6v5"/></svg><span class="sr-only @min-[420px]/mx:not-sr-only">Reply</span><span class="sr-only"> to Mina Cho</span></summary>
              <form class="group/f mt-2 flex items-end gap-2">
                <label class="sr-only" for="mx-a-3">Reply to Mina Cho</label>
                <textarea class="field-sizing-content max-h-40 min-h-11 min-w-0 flex-1 resize-none rounded-[14px] border-[1.5px] border-[#8a84a3] bg-white px-3 py-2.5 leading-[1.4] text-mx-ink placeholder:text-mx-muted focus:border-mx-accent focus:shadow-[0_0_0_3px_rgba(109,40,217,.2)] focus:outline-2 focus:outline-transparent" id="mx-a-3" rows="1" required placeholder="Write a reply"></textarea>
                <button class="inline-flex h-11 min-w-11 flex-none cursor-pointer items-center justify-center gap-1.5 rounded-[14px] bg-mx-accent px-3 font-semibold text-white transition-colors duration-200 hover:bg-[#5b21b6] group-has-[textarea:invalid]/f:bg-[#d9d4ea] group-has-[textarea:invalid]/f:text-mx-muted motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mx-accent" type="submit"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12 20 4l-6 16-3-7z"/><path d="M11 13 20 4"/></svg><span class="sr-only @min-[420px]/mx:not-sr-only">Send</span></button>
              </form>
            </details>
          </div>
        </article>
    </li>
  </ol>
  <p class="sr-only" role="status" data-announce></p>
</section></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#5b5670] uppercase">Sidebar: the same markup at 300px</span>
<section class="@container/mx rounded-[20px] border border-mx-line bg-white p-3.5 text-[.88rem] leading-normal text-mx-ink shadow-[0_20px_44px_-30px_rgba(30,27,46,.4)] @min-[420px]/mx:p-[22px] @min-[420px]/mx:text-[.94rem]" data-mx aria-labelledby="mx-h-b">
  <h2 class="mb-3 text-[1rem] leading-[1.3] font-bold text-balance @min-[420px]/mx:mb-4 @min-[420px]/mx:text-[1.1rem]" id="mx-h-b">3 comments on “Container queries in production”</h2>
  <ol class="flex flex-col gap-2.5">
    <li>
        <article class="group/c grid grid-cols-[28px_minmax(0,1fr)] gap-x-2.5 rounded-2xl border border-transparent p-2.5 transition-[background-color,border-color] duration-200 has-[details[open]]:border-mx-accent has-[details[open]]:bg-mx-soft/60 motion-reduce:transition-none @min-[420px]/mx:grid-cols-[40px_minmax(0,1fr)] @min-[420px]/mx:gap-x-3.5 @min-[420px]/mx:p-3.5" aria-label="Comment by Yara Haddad">
          <span class="grid size-7 place-items-center rounded-full text-[.62rem] font-bold @min-[420px]/mx:size-10 @min-[420px]/mx:text-[.78rem] bg-[#fbcfe8] text-[#831843]" aria-hidden="true">YH</span>
          <p class="flex flex-col @min-[420px]/mx:flex-row @min-[420px]/mx:flex-wrap @min-[420px]/mx:items-baseline @min-[420px]/mx:gap-x-2"><b class="font-bold">Yara Haddad</b><time class="text-[.78rem] text-mx-muted" datetime="2026-10-19T10:05">2 hours ago</time><span class="hidden self-start rounded-full bg-mx-accent px-2 py-0.5 text-[.68rem] font-bold tracking-[.04em] text-white uppercase group-has-[details[open]]/c:inline-block">Replying</span></p>
          <p class="col-start-2 mt-1 text-pretty">We moved our pricing cards to container queries last month. The same component now fits the sidebar, the modal and the main grid with no overrides.</p>
          <div class="col-start-2 mt-1.5 flex flex-wrap items-center gap-1">
            <label class="group/l inline-flex min-h-8 cursor-pointer items-center gap-1.5 rounded-full px-2 text-[.82rem] font-semibold text-mx-muted hover:bg-mx-soft has-checked:text-mx-heart has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-mx-accent"><input class="sr-only" type="checkbox" checked><svg class="group-has-checked/l:fill-current" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-9.2-8.6C1.3 8.4 3.2 5 6.6 5c2.1 0 3.6 1.2 5.4 3 1.8-1.8 3.3-3 5.4-3 3.4 0 5.3 3.4 3.8 6.4C19 15.6 12 20 12 20Z"/></svg><span class="sr-only @min-[420px]/mx:not-sr-only">Like</span><span class="sr-only"> comment by Yara Haddad</span></label>
            <details class="open:basis-full" data-to="Yara Haddad">
              <summary class="inline-flex min-h-8 cursor-pointer list-none items-center gap-1.5 rounded-full px-2 text-[.82rem] font-semibold text-mx-muted hover:bg-mx-soft [details[open]>&]:bg-mx-accent [details[open]>&]:text-white [&::-webkit-details-marker]:hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mx-accent"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5"/><path d="M4 9h10a6 6 0 0 1 6 6v5"/></svg><span class="sr-only @min-[420px]/mx:not-sr-only">Reply</span><span class="sr-only"> to Yara Haddad</span></summary>
              <form class="group/f mt-2 flex items-end gap-2">
                <label class="sr-only" for="mx-b-1">Reply to Yara Haddad</label>
                <textarea class="field-sizing-content max-h-40 min-h-11 min-w-0 flex-1 resize-none rounded-[14px] border-[1.5px] border-[#8a84a3] bg-white px-3 py-2.5 leading-[1.4] text-mx-ink placeholder:text-mx-muted focus:border-mx-accent focus:shadow-[0_0_0_3px_rgba(109,40,217,.2)] focus:outline-2 focus:outline-transparent" id="mx-b-1" rows="1" required placeholder="Write a reply"></textarea>
                <button class="inline-flex h-11 min-w-11 flex-none cursor-pointer items-center justify-center gap-1.5 rounded-[14px] bg-mx-accent px-3 font-semibold text-white transition-colors duration-200 hover:bg-[#5b21b6] group-has-[textarea:invalid]/f:bg-[#d9d4ea] group-has-[textarea:invalid]/f:text-mx-muted motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mx-accent" type="submit"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12 20 4l-6 16-3-7z"/><path d="M11 13 20 4"/></svg><span class="sr-only @min-[420px]/mx:not-sr-only">Send</span></button>
              </form>
            </details>
          </div>
        </article>
      <ol class="mt-2 ml-3.5 flex flex-col gap-2.5 border-l-2 border-mx-line pl-2.5 @min-[420px]/mx:ml-5 @min-[420px]/mx:pl-4">
        <li><article class="group/c grid grid-cols-[28px_minmax(0,1fr)] gap-x-2.5 rounded-2xl border border-transparent p-2.5 transition-[background-color,border-color] duration-200 has-[details[open]]:border-mx-accent has-[details[open]]:bg-mx-soft/60 motion-reduce:transition-none @min-[420px]/mx:grid-cols-[40px_minmax(0,1fr)] @min-[420px]/mx:gap-x-3.5 @min-[420px]/mx:p-3.5" aria-label="Comment by Owen Price">
          <span class="grid size-7 place-items-center rounded-full text-[.62rem] font-bold @min-[420px]/mx:size-10 @min-[420px]/mx:text-[.78rem] bg-[#bae6fd] text-[#0c4a6e]" aria-hidden="true">OP</span>
          <p class="flex flex-col @min-[420px]/mx:flex-row @min-[420px]/mx:flex-wrap @min-[420px]/mx:items-baseline @min-[420px]/mx:gap-x-2"><b class="font-bold">Owen Price</b><time class="text-[.78rem] text-mx-muted" datetime="2026-10-19T11:12">1 hour ago</time><span class="hidden self-start rounded-full bg-mx-accent px-2 py-0.5 text-[.68rem] font-bold tracking-[.04em] text-white uppercase group-has-[details[open]]/c:inline-block">Replying</span></p>
          <p class="col-start-2 mt-1 text-pretty">Did you run into container units inside flex children? Our widths collapsed until we added min-width: 0.</p>
          <div class="col-start-2 mt-1.5 flex flex-wrap items-center gap-1">
            <label class="group/l inline-flex min-h-8 cursor-pointer items-center gap-1.5 rounded-full px-2 text-[.82rem] font-semibold text-mx-muted hover:bg-mx-soft has-checked:text-mx-heart has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-mx-accent"><input class="sr-only" type="checkbox"><svg class="group-has-checked/l:fill-current" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-9.2-8.6C1.3 8.4 3.2 5 6.6 5c2.1 0 3.6 1.2 5.4 3 1.8-1.8 3.3-3 5.4-3 3.4 0 5.3 3.4 3.8 6.4C19 15.6 12 20 12 20Z"/></svg><span class="sr-only @min-[420px]/mx:not-sr-only">Like</span><span class="sr-only"> comment by Owen Price</span></label>
            <details class="open:basis-full" data-to="Owen Price">
              <summary class="inline-flex min-h-8 cursor-pointer list-none items-center gap-1.5 rounded-full px-2 text-[.82rem] font-semibold text-mx-muted hover:bg-mx-soft [details[open]>&]:bg-mx-accent [details[open]>&]:text-white [&::-webkit-details-marker]:hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mx-accent"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5"/><path d="M4 9h10a6 6 0 0 1 6 6v5"/></svg><span class="sr-only @min-[420px]/mx:not-sr-only">Reply</span><span class="sr-only"> to Owen Price</span></summary>
              <form class="group/f mt-2 flex items-end gap-2">
                <label class="sr-only" for="mx-b-2">Reply to Owen Price</label>
                <textarea class="field-sizing-content max-h-40 min-h-11 min-w-0 flex-1 resize-none rounded-[14px] border-[1.5px] border-[#8a84a3] bg-white px-3 py-2.5 leading-[1.4] text-mx-ink placeholder:text-mx-muted focus:border-mx-accent focus:shadow-[0_0_0_3px_rgba(109,40,217,.2)] focus:outline-2 focus:outline-transparent" id="mx-b-2" rows="1" required placeholder="Write a reply"></textarea>
                <button class="inline-flex h-11 min-w-11 flex-none cursor-pointer items-center justify-center gap-1.5 rounded-[14px] bg-mx-accent px-3 font-semibold text-white transition-colors duration-200 hover:bg-[#5b21b6] group-has-[textarea:invalid]/f:bg-[#d9d4ea] group-has-[textarea:invalid]/f:text-mx-muted motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mx-accent" type="submit"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12 20 4l-6 16-3-7z"/><path d="M11 13 20 4"/></svg><span class="sr-only @min-[420px]/mx:not-sr-only">Send</span></button>
              </form>
            </details>
          </div>
        </article></li>
      </ol>
    </li>
    <li>
        <article class="group/c grid grid-cols-[28px_minmax(0,1fr)] gap-x-2.5 rounded-2xl border border-transparent p-2.5 transition-[background-color,border-color] duration-200 has-[details[open]]:border-mx-accent has-[details[open]]:bg-mx-soft/60 motion-reduce:transition-none @min-[420px]/mx:grid-cols-[40px_minmax(0,1fr)] @min-[420px]/mx:gap-x-3.5 @min-[420px]/mx:p-3.5" aria-label="Comment by Mina Cho">
          <span class="grid size-7 place-items-center rounded-full text-[.62rem] font-bold @min-[420px]/mx:size-10 @min-[420px]/mx:text-[.78rem] bg-[#fde68a] text-[#713f12]" aria-hidden="true">MC</span>
          <p class="flex flex-col @min-[420px]/mx:flex-row @min-[420px]/mx:flex-wrap @min-[420px]/mx:items-baseline @min-[420px]/mx:gap-x-2"><b class="font-bold">Mina Cho</b><time class="text-[.78rem] text-mx-muted" datetime="2026-10-19T11:30">40 minutes ago</time><span class="hidden self-start rounded-full bg-mx-accent px-2 py-0.5 text-[.68rem] font-bold tracking-[.04em] text-white uppercase group-has-[details[open]]/c:inline-block">Replying</span></p>
          <p class="col-start-2 mt-1 text-pretty">text-wrap: pretty fixed the lonely last words in our card titles. A one-line change and the whole page looks more deliberate.</p>
          <div class="col-start-2 mt-1.5 flex flex-wrap items-center gap-1">
            <label class="group/l inline-flex min-h-8 cursor-pointer items-center gap-1.5 rounded-full px-2 text-[.82rem] font-semibold text-mx-muted hover:bg-mx-soft has-checked:text-mx-heart has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-mx-accent"><input class="sr-only" type="checkbox"><svg class="group-has-checked/l:fill-current" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-9.2-8.6C1.3 8.4 3.2 5 6.6 5c2.1 0 3.6 1.2 5.4 3 1.8-1.8 3.3-3 5.4-3 3.4 0 5.3 3.4 3.8 6.4C19 15.6 12 20 12 20Z"/></svg><span class="sr-only @min-[420px]/mx:not-sr-only">Like</span><span class="sr-only"> comment by Mina Cho</span></label>
            <details class="open:basis-full" data-to="Mina Cho">
              <summary class="inline-flex min-h-8 cursor-pointer list-none items-center gap-1.5 rounded-full px-2 text-[.82rem] font-semibold text-mx-muted hover:bg-mx-soft [details[open]>&]:bg-mx-accent [details[open]>&]:text-white [&::-webkit-details-marker]:hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mx-accent"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5"/><path d="M4 9h10a6 6 0 0 1 6 6v5"/></svg><span class="sr-only @min-[420px]/mx:not-sr-only">Reply</span><span class="sr-only"> to Mina Cho</span></summary>
              <form class="group/f mt-2 flex items-end gap-2">
                <label class="sr-only" for="mx-b-3">Reply to Mina Cho</label>
                <textarea class="field-sizing-content max-h-40 min-h-11 min-w-0 flex-1 resize-none rounded-[14px] border-[1.5px] border-[#8a84a3] bg-white px-3 py-2.5 leading-[1.4] text-mx-ink placeholder:text-mx-muted focus:border-mx-accent focus:shadow-[0_0_0_3px_rgba(109,40,217,.2)] focus:outline-2 focus:outline-transparent" id="mx-b-3" rows="1" required placeholder="Write a reply"></textarea>
                <button class="inline-flex h-11 min-w-11 flex-none cursor-pointer items-center justify-center gap-1.5 rounded-[14px] bg-mx-accent px-3 font-semibold text-white transition-colors duration-200 hover:bg-[#5b21b6] group-has-[textarea:invalid]/f:bg-[#d9d4ea] group-has-[textarea:invalid]/f:text-mx-muted motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mx-accent" type="submit"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12 20 4l-6 16-3-7z"/><path d="M11 13 20 4"/></svg><span class="sr-only @min-[420px]/mx:not-sr-only">Send</span></button>
              </form>
            </details>
          </div>
        </article>
    </li>
  </ol>
  <p class="sr-only" role="status" data-announce></p>
</section></div>
CSS 
/* Palette as theme colours. The container is @container/mx with @min-[420px]/mx: variants; :has() states use has-[…]:,
   has-checked: and group-has-[…]/c:; the textarea uses field-sizing-content with a resizable fallback below. */
@theme {
  --color-mx-accent:#6d28d9; --color-mx-soft:#efeafd; --color-mx-ink:#1e1b2e; --color-mx-muted:#5b5670;
  --color-mx-line:#e4e0f2; --color-mx-heart:#be123c;
}
@supports not (field-sizing:content){textarea.field-sizing-content{min-height:5.5em;resize:vertical}}
JavaScript 
/* The only script: keep the demo on the page when a reply is sent, and let Esc close an open reply form.
   Opening the form, the Replying state, the Like toggle, the growing textarea and the layouts are all HTML and CSS. */
document.querySelectorAll('[data-mx]').forEach(function (root) {
  var live = root.querySelector('[data-announce]');
  root.addEventListener('submit', function (e) {
    e.preventDefault();
    var details = e.target.closest('details');
    live.textContent = 'Reply to ' + details.dataset.to + ' sent.'; // send it to your backend here
    e.target.reset(); details.open = false; details.querySelector('summary').focus();
  });
  root.addEventListener('keydown', function (e) {
    var details = e.target.closest('details[open]');
    if (e.key === 'Escape' && details) { details.open = false; details.querySelector('summary').focus(); }
  });
});

About this set

One comment thread shown twice, in a wide main column and a 300px sidebar, to show how much of a comment section current CSS can run without scripts. A container query lays the thread out by the width of its slot: from 420px it uses large avatars, names and times on one line and text labels on the actions; below that it uses small avatars, stacked names and icon-only actions with hidden labels. Reply is a native details element, so it opens and closes with the keyboard and announces its state without JavaScript, and :has() turns the whole comment into a Replying state with an accent border, a tint and a Replying tag while its form is open. Like is a visually hidden checkbox whose label fills the heart through :has(:checked). The reply textarea grows with its text through field-sizing: content, and browsers without it get a taller box the reader can resize. Send looks inactive while the required field is empty, comment text uses text-wrap: pretty and the heading text-wrap: balance. About ten lines of JavaScript only keep the demo on the page after sending and let Esc close the form.

What’s included

  • Container query layout that adapts to the slot, not the viewport
  • Native details reply forms with a :has() Replying state
  • Checkbox likes styled with :has(:checked)
  • field-sizing: content textarea with a resizable fallback
  • text-wrap: pretty for comments and balance for the heading

Accessibility

The details summary is a native disclosure that reports expanded or collapsed and works with Enter and Space; its name includes the author, and Esc closes the form and returns focus to it. The Like checkbox keeps its label and draws focus on the visible pill. Icon-only actions keep visually hidden labels in the narrow layout, the reply field is labelled, sending is announced politely, and transitions stop under prefers-reduced-motion.

Customise it

Change --mx-accent, --mx-soft and --mx-heart on .mx, and the 420px value in the @container rule for the switch point. Bootstrap uses the same variables; in Tailwind edit the --color-mx-* theme colours and the @min-[420px]/mx: variants.