Ok, this is my first question here, please forgive me for the long text :)
Let's consider we have 2 products to show: product A and product B.
They are the result of a process I asked someone else to do for me, and I get now the chance to show what was done in my absence from another person, and if needed, give feedback to him/her.
These products are different in content, but It's necessary/mandatory to show them at the same time.
For each of them we have got: an info text and 2 call to action button (let's say "Y" or "N").
If I make rollover on the product A space (close to it too) dedicated to this specific product (and its related stuff explained above) I will see it in first plane. At the same time I cannot interact with the other product B space's stuff 'till I will go without the cursor on the product B area and so on.
If I click "Y" I will go to another page (let's say homepage). If I click "N" I will go to another one for the feedback.
I would avoid scroll and see everything in above the fold area.
Is tab system the best way to show them? Or is it improvable by UX and UI? Because it's really messy to show two tabs in a width of 1230px (bootstrap grid).