Here are the details how to use the layout (aka - Reponsive Grid) in AEM. Getting Started with AEM Sites Part 3 - Client-Side Libraries and Responsive Grid You should be following that approach.

Are you using a layout container to organize your content. You should be using a grid that lets you drop in the inner components to organize these. You can organize these components using a two column layout.

Many times when upgrading to AEM 6.4 from 5.x - you may need to rewrite your components - esp if they have Java libs and dependencies.When moving to 6.4 - you should work through this article - which reflects best practice in AEM 6.4 and 6.4 technologies like editable templates, HTL, etc: Getting St...

To create a new site using editable templates (the recommended way to build sites in AEM 6.4/6.3) - see these resources:1 - Adobe Experience Manager Help | Creating an Adobe Experience Manager 6.4 website using Editable Templates (this is a small quick start example with a package)2 - Getting Starte...

I am not sure what you mean, Can you describe what you want two separate components to do?

Is this an upgraded AEM instance of a new instance?

This is a bug - i have seen strange behaviour when using a radio granite type on a multifield. I recommend opening a ticket.

The following video shows how to use an AEM  Experience Fragment within a page based on an editable template.

Once you create an editable template and an Experience Fragment, you can set a policy in your editable template so that Experience Fragments are able to be used in an AEM page that are created from the editable template.  I will demo this in a video.To learn how to build a site based on an editable ...

Nice response!