I am adding a functionality to existing project in Angular. I have some Bulma cards which are showing certain information. I would like to have a following option: when none of the cards are clicked, they will show just short version of data which they get from API. If I click on one of the cards, I would like that card to expand horizontally and vertically, so it would become wider and taller, and show full information from API. My problem is, I don't know where to start from. I see mention of Ionic, Angular Material, custom Bulma library like this one https://bulma-collapsible.netlify.app/installation/ . I would like to use the simplest solution. If anyone can point me in the right direction I would be extremely grateful. Tutorial, manual, anything, since I'm not sure which tool I need for this.

EDIT So the top left card should expand into the red rectangle, and other cards should be shifted under this big expanded card. It would also be beneficial if only one card at the time can be expanded. So If first one is expanded and I click on the second one, first one would collapse and second one would expand.

<section class="section">
  <div class="container">
    <div class="columns is-multiline" *ngIf="dummyCampaigns">
      <div class="column is-4" *ngFor="let campaign of dummyCampaigns">
        <div class="card">
          <div class="card-image">
            <figure class="image is-4by3">
              <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
            </figure>
          </div>
          <div class="card-content">
            <div class="media">
              <div class="media-content">
                <p class="title is-4">{{ campaign.title }}</p>
                <p class="subtitle is-6">{{ campaign.owner }}</p>
              </div>
            </div>
            <div class="content">
              {{ campaign.campaignDetails }}
              <br>
              <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>