title: css styling with bulma cards
body: <p>I do have the following HTML output:</p>
  <p><a href="https://i.stack.imgur.com/aBdEF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aBdEF.jpg" alt="enter image description here" /></a></p>
  <p>so, as you can see the footer isn't matching...</p>
  <p>my css component looks like this:</p>
  <pre><code>.card-equal-height {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  .card-equal-height
  .card-footer {
    margin-top: auto;
    height: 100%;
  }
  </code></pre>
  <p><strong>.card-equal-height.card-footer</strong> this part is not working somehow. I want the footer to be matching the order cards, no matter how long the description is.</p>
  <p>html:</p>
  <pre><code>&lt;div [ngClass]=&quot;{'card-highlight': product.listItemHovered}&quot; class=&quot;card card-equal-height&quot;
                   (mouseenter)=&quot;hoverListItem(product)&quot;
                   (mouseleave)=&quot;hoverListItem(product)&quot;
                   (click)=&quot;test(product)&quot;&gt;
        &lt;div class=&quot;card-image&quot;&gt;
          &lt;figure class=&quot;image is-square&quot;&gt;
            &lt;img [src]=&quot;product.imageURL&quot; alt=&quot;{{product.title}}&quot;&gt;
          &lt;/figure&gt;
        &lt;/div&gt;
        &lt;div class=&quot;card-content&quot;&gt;
          &lt;p class=&quot;title has-text-centered&quot;&gt; {{product.title}}&lt;/p&gt;
          &lt;p class=&quot;subtitle&quot;&gt;{{product.price | currency: &quot;USD&quot;}}&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;card-footer&quot;&gt;
          &lt;p class=&quot;card-footer-item&quot;&gt;
            &lt;button (click)=&quot;removeFromCart(product); showRemoved()&quot;
                    class=&quot;button is-danger is-outlined is-pulled-left is-small&quot;&gt; Remove
            &lt;/button&gt;
          &lt;/p&gt;
          &lt;p class=&quot;card-footer-item&quot;&gt;
            &lt;button (click)=&quot;addToCart(product);showAdded()&quot;
                    class=&quot;button is-outlined is-primary is-pulled-right is-small&quot;&gt; Add to Cart
            &lt;/button&gt;
          &lt;/p&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>