I've tried many different methods but really cannot get my "Related Products" to show two columns instead of one on mobile view.
You can see the problem in here 
The rendered CSS is currently 
The current code I am trying is
.related.products ul.products li.product {
width: 50% !important;
}
But I've also tried flexbox options.
The link is here under Sleep Essentials.
Just to reiterate, the issue is on mobile. If you reduce the screen width, you can see that the CSS above squashes the recommended products to the left but doesn't stack in 2 columns.
Please help!