I'm trying to align the price and the view button in two divs but can't seem to get it right.

I've set display flex on the divs and margin-top : auto on the element but it's not working and since I am using Astra theme, I can't modify the HTML code.

```css
ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
}
li {
  display: flex;
  flex-direction: column;
  width: 315px;
}
.button {
  display: block;
}
.astra-shop-summary-wrap {
  display: flex;
  flex-direction: column;
}
.price {
  margin-top: auto;
}
```

```html
<ul class="flex">
  <li class="">
    <div class="astra-shop-thumbnail-wrap">
      <a href="#" class="">
        <img width="300" height="300" src="" class="">
      </a>
    </div>
    <div class="astra-shop-summary-wrap">
      <span class="">Lorem ipsum</span>
      <a href="#">
        <h2 class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
      </a>
      <span class="price">47.50</span>
      <a href="" class="button">View</a>
    </div>
  </li>
  <li class="">
    <div class="astra-shop-thumbnail-wrap">
      <a href="#" class="">
        <img width="300" height="300" src="" class="">
      </a>
    </div>
    <div class="astra-shop-summary-wrap">
      <span class="">Lorem ipsum</span>
      <a href="#">
        <h2 class="">Lorem ipsum dolor sit amet </h2>
      </a>
      <span class="price">47.50</span>
      <a href="" class="button">View</a>
    </div>
  </li>
</ul>
```