Align Quick View Buttons Horizontally/Vertically - css

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: