Align Quick View Buttons Horizontally/Vertically

Question

how do I align the quick view buttons horizontally?

I've tried css below but it doesn't work. Please advise. Thank you.

.woosq-btn {
    display: flex;
    justify-content: center;
}

I'm using WPC Smart Quick View plugin. Link https://wordpress.org/plugins/woo-smart-quick-view/

---

UPDATE - 3 MAY 2021

After using the CSS provided by @Ali Klein, it triggered another problem. All products are shown horizontally.

I fixed it by adding flex-wrap: wrap;

ul.products {
  display: flex;
  flex-wrap: wrap;
}

li.product {
  display: flex;
  flex-direction: column;
}

li.product > a {
  flex: 1;
}

Final outcome:

Answer 1

The way I'd approach this is by applying display: flex; flex-direction: column on the individual cards, then wrapping all the content apart from the Quick View button in a container (it's already in a container a.woocommerce-loop-product__link), and give that container flex: 1 so it fills up the space of the card vertically.

.container {
  display: flex;
}

.item {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 10px;
  background: lightblue;
}

.content {
  flex: 1;
}

.image {
  width: 100%;
  height: 200px;
  background-color: darkblue;
}

.description {
  padding: 10px;
}

.btn {
  margin: 10px;
}

<div class="container">
  <div class="item">
    <div class="content">
      <div class="image"></div>
      <p class="description">Suspendisse interdum consectetur libero id faucibus nisl tincidunt eget. Vitae sapien pellentesque habitant morbi tristique. </p>
    </div>
    <button class="btn">
      Quick View
    </button>
  </div>
  <div class="item">
    <div class="content">
      <div class="image"></div>
      <p class="description">Sit amet nisl purus in mollis nunc sed id.</p>
    </div>
    <button class="btn">
      Quick View
    </button>
  </div>
  <div class="item">
    <div class="content">
      <div class="image"></div>
      <p class="description">Diam phasellus vestibulum lorem sed risus ultricies. Elementum integer enim neque volutpat.</p>
    </div>
    <button class="btn">
      Quick View
    </button>
  </div>
  <div class="item">
    <div class="content">
      <div class="image"></div>
      <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua orci nulla pellentesque dignissim enim sit amet venenatis</p>
    </div>
    <button class="btn">
      Quick View
    </button>
  </div>
</div>

With your markup, the css would look something like:

ul.products {
  display: flex;
}

li.product {
  display: flex;
  flex-direction: column;
}

li.product > a {
  flex: 1;
}

You'll end up with the following: