<article>
  <h2>A Really Awesome Blog Post Title</h2>
  <div class="excerpt">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem asperiores reprehenderit, dicta illum culpa facere qui ab dolorem suscipit praesentium nostrum delectus repellendus quas unde error numquam maxime cupiditate quaerat?
  </div>
  <button aria-disabled="true" aria-label="This button is disabled since assistive tech already announces the article content.">Read More</button>
</article>

:root {
  interpolate-size: allow-keywords;
}

.excerpt {
  overflow-y: hidden;
  height: 1.5lh;
  transition: height 0.25s ease-in;
}

@layer pretty {
  article {
    background: #2228;
    border: 1px solid #000;
    border-radius: 12px;
    width: min(80%, 500px);
    padding: 2rem;
    
    h2 {
      text-wrap: pretty;
      margin-block-end: 0;
    }
  }

  div {
    margin-block-end: 1.5rem;
    padding-block-end: 1.5rem;
    position: relative;

    &:before {
      background: linear-gradient(130deg, #ff7a18 0%, #af002d 41.07%, #319197 76.05% );
      box-shadow: -10px 0 20px 3px #000;
      content: "";
      height: 5px;
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }
}

@layer a11y {
  #notice:not(:focus):not(:active) {
    display: none;
  }
}

@layer base {
  html {
    background-color: #262626;
    background-position: top center;
    background-repeat: no-repeat;
    background-image:
      radial-gradient(50% 50% at top center, rgb(0 0 0 / 0.66), #262626),
      linear-gradient(180deg, #fff, #262626);
    background-size: 120% 2000px, 100% 2000px;
  }
  
  body {
    color: #fff;
    display: grid;.
    font-family: system-ui;
    overflow-x: hidden;
    place-items: center;
  }
}

const btn = document.querySelector('button');
const panel = document.querySelector('div');

function toggleHeight() {
  if (panel.getAttribute("style") === null) {
    panel.setAttribute('style', 'height: auto;');
  } else {
    panel.removeAttribute("style", "");
  }
}

btn.addEventListener('click', toggleHeight);