[Tablet Orders] Add dividing line between side by side views

[iamgabrielma]

Closes #11906

Description

This PR adds a dividing line between each view when using the SideBySideView layout for split views.

Testing instructions

• Switch sideBySideViewForOrderForm feature flag to true
• Go to Orders > Tap + to create a new order > observe that there's a vertical dividing line between the product selector and the order summary.

Screenshots

[wpmobilebot]

📲 You can test the changes from this Pull Request in WooCommerce iOS by scanning the QR code below to install the corresponding build.

	App Name	WooCommerce iOS
	Build Number	pr12051-3405dab
	Version	17.3
	Bundle ID	com.automattic.alpha.woocommerce
	Commit	3405dab2f30f61d8d01aee73f78a82e779702198
	App Center Build	WooCommerce - Prototype Builds #8103

Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

[iamgabrielma]

I think we also need to remove some padding from the Product Selector – this gap looks a little strange: It seems to only affect iPhone....

This was an odd one, not only only affects iPhone on split view, but also only affects when there are no selected products in the view. As soon as you select any, the gap disappears (note how other elements of the view move slightly as well when a product is selected, and the text is wrapped differently):

I couldn't see why this was happening since changes in the selected state doesn't seem to add any specific view properties, but by adding some debugging corners to all components of the view, the.ignoresSafeArea property stood out: For some reason when products are unselected, the container seems to adjust perfectly to the safe area, but when products are selected, then ignores it. By removing the property on 3405dab2f30f61d8d01aee73f78a82e779702198 we resolve this issue and now looks fine (confirmed as well in different devices and other features like coupons), but TBH I'm still not entirely sure why: