How can I align this css grid section center vertically?

August 11, 2022

I have these cards, and I want the first card to stand out from the rest. So my idea was to align it to the center vertically. I tried using align-items: center; but it didn’t work? I also had an idea of adding a vertical line in-between the basic block and the rest of the blocks. Any suggestions or improvements I can make? Thanks

.select-plan-wrapper {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 15px;
}

.select-plan-wrapper-two {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.select-plan-block {
  background: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
  border-radius: 4px;
  align-self: start;
  text-align: center;
}

.select-plan-block-two {
  display: flex;
  align-items: center;
  background: blue;
}

<section class="select-plan-section select-plan-wrapper">
  <article class="select-plan-block select-plan-block-two">
    <header class="select-plan-block-header">
      <h1>Basic Plan</h1>
    </header>
    <fieldset>
      <ul class="select-plan-list">
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
      </ul>
    </fieldset>
  </article>


  <div class="select-plan-wrapper-two">
    <article class="select-plan-block" style="background: silver;">
      <header class="select-plan-block-header">
        <h1>Silver plan</h1>
      </header>
      <fieldset>
        <ul class="select-plan-list">
          <li>Lorem ipsum>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
        </ul>
      </fieldset>
    </article>
    <article class="select-plan-block" style="background: gold;">
      <header class="select-plan-block-header">
        <h1>Gold plan</h1>
      </header>
      <fieldset>
        <ul class="select-plan-list">
          <li>Lorem ipsum</li>
          <li>Lorem ipsum</li>
          <li>Lorem ipsum</li>
        </ul>
      </fieldset>
    </article>
    <article class="select-plan-block" style="background: #02d3cc;">
      <header class="select-plan-block-header">
        <h1>Platinum plan</h1>
      </header>
      <fieldset>
        <ul class="select-plan-list">
          <li>Lorem ipsum>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
        </ul>
      </fieldset>
    </article>
    <article class="select-plan-block" style="background: skyblue;">
      <header class="select-plan-block-header">
        <h1>Diamond plan</h1>
      </header>
      <fieldset>
        <ul class="select-plan-list">
          <li>Lorem ipsum>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
        </ul>
      </fieldset>
    </article>
  </div>