Force Break text into 2 lines - images mis aligning

[vitamentltd]

Im struggling to force the header text into 2 lines which is causing the images to misalign. 

I want to allow 2 lines of text for the header and then if it goes past that its hidden and displays ....

I also want to add a space between the button and quantity field in screen shot and centre align the values. Any feedback is great. 

[dmwwebartisan]

@vitamentltd 

add code assets/theme.scss.liquid or timber.scss.liquid bottom of the file

#Collection input[type="submit"] {cursor: pointer;margin-top: 10px;margin-bottom: 20px;}
#Collection .btn, .shopify-payment-button .shopify-payment-button__button--unbranded{display: block !important; text-align: center; margin: 0 auto;}
#Collection .product-card {text-overflow: ellipsis; overflow: hidden;white-space: nowrap;}

Hope this works.

Thanks!