Please see the page layout below:
I want it to be the following:
Here, the box shown in the right is a inline visualforce page. is there a way to create the desired page layout?
If you absolutely must have that layout then you will need to create a second Visualforce page for your form so you can position both pages side-by-side on the layout.
A nice configurable way to do this is to create a field set with the desired fields and iterate over it within the second VF page to generate the form. This way admins can still manage the page layout without updating code.
No, this is not possible using the standard page layout features, because there is no equivalent to the HTML rowspan attribute. Therefore the cell blows the height of the entire row up. And without question it looks ugly...
If acceptable, I would recommend to use a different section in the layout which has only one column where you embed just your inline vf-page. This one-columns-section can be surrounded by two-column sections (above and below) which hold you regular fields. You can hide the captions of these sections to make them nearly invisible.
You could get the desired results exactly by overriding the standard layout with a visualforce page or by using officially not supported methods as described here : End of javascript sidebar workarounds? (this could also bring you a dynamic height if the iframe container if you need it)