JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css">

<button commandfor="dialog-short-content" command="show-modal">
  Open (Short Content)
</button>
<button commandfor="dialog-long-content" command="show-modal">
  Open (Long Content)
</button>

<dialog id="dialog-short-content">
  <aside>
    <article>
      <header>
        <button aria-label="Close" commandfor="dialog-short-content" command="request-close" rel="prev"></button>
        <p>
          <strong>Short Content</strong>
        </p>
      </header>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </article>
  </aside>
</dialog>

<dialog id="dialog-long-content">
  <aside>
    <article>
      <header>
        <button aria-label="Close" commandfor="dialog-long-content" command="request-close" rel="prev"></button>
        <p>
          <strong>Long, Overflowing Content</strong>
        </p>
      </header>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at vestibulum velit, at tincidunt augue. Duis tristique tortor elit, vitae malesuada leo auctor ut. Pellentesque accumsan est ligula, nec sollicitudin ligula semper id. Aenean congue diam in sapien pellentesque, eget mollis ante tempor. Nullam pulvinar arcu quis faucibus commodo</p>
      <p>Phasellus feugiat, augue eu lacinia blandit, tortor justo posuere nibh, sit amet lobortis ipsum justo eu magna. Aliquam erat volutpat. Fusce vel consectetur enim, laoreet commodo dui. Nulla sed rhoncus lorem. Vestibulum eleifend leo odio, nec luctus est rhoncus eget. Vivamus et dictum lacus. Morbi vel nisl enim.</p>
      <p>Maecenas vitae augue ac diam dapibus bibendum eget quis odio. Integer dignissim, arcu dignissim bibendum posuere, erat nibh molestie libero, nec lacinia quam lorem ac ante. Donec sed justo nec justo congue iaculis. Nulla posuere leo eu velit feugiat iaculis. Sed eu dictum lectus, quis placerat mi. Nulla facilisi....

CSS

/* brand new styles */
dialog:has(> aside) {
  align-items: flex-start;
  justify-content: flex-start;
}

dialog > aside {
  height: 100vh;
  width: clamp(400px, 33%, 100vw);
}

dialog > aside > article {
  height: 100%;
  margin-bottom: 0;
  overflow-y: auto;
}

/* adding "> aside" to existing styles */
dialog > aside > article > header > * {
  margin-bottom: 0;
}
dialog > aside > article > header :is(a, button)[rel=prev] {
  margin: 0;
  margin-left: var(--pico-spacing);
  padding: 0;
  float: right;
}
dialog > aside > article > footer {
  text-align: right;
}
dialog > aside > article > footer button,
dialog > aside > article > footer [role=button] {
  margin-bottom: 0;
}
dialog > aside > article > footer button:not(:first-of-type),
dialog > aside > article > footer [role=button]:not(:first-of-type) {
  margin-left: calc(var(--pico-spacing) * 0.5);
}
dialog > aside > article :is(a, button)[rel=prev] {
  display: block;
  width: 1rem;
  height: 1rem;
  margin-top: calc(var(--pico-spacing) * -1);
  margin-bottom: var(--pico-spacing);
  margin-left: auto;
  border: none;
  background-image: var(--pico-icon-close);
  background-position: center;
  background-size: auto 1rem;
  background-repeat: no-repeat;
  background-color: transparent;
  opacity: 0.5;
  transition: opacity var(--pico-transition);
}
dialog > aside > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
  opacity: 1;
}