Insert two fragments into a tab

I have a project in which you add a Navigation Drawer and a ToolBar with ViewPager , with two Tab.

I want a list to appear in the first Tab and when you select a list item, its details appear next to it, in the other fragment, within the same Tab. That is to say, that tab1 shows a fragment that is the list and to its right another one with the details.

I have managed to make the list appear, however I am not able to insert another fragment in that same Tab, in order to see the details.

Code Main Activity :

PagerAdapter adapter = new PagerAdapter(getSupportFragmentManager());
Toolbar();
drawerLayout = (DrawerLayout) findViewById(R.id.drawer);
NavigationView navigationView = (NavigationView) findViewById(R.id.nav);
crearDrawer(navigationView);           
mViewPager = (ViewPager) findViewById(R.id.pag);
seleccionarUnItem(navigationView.getMenu().getItem(1));
AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar);
tabLayout = new TabLayout(this);
tabLayout.setupWithViewPager(mViewPager);
for (int i = 0; i < tabLayout.getTabCount(); i++) {
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            if(i==0) {
                tab.setText(R.string.list);
            }else{
                tab.setText(R.string.geo);
            }
        }
appBarLayout.addView(tabLayout);

The ̣ layout of the Main Activity :

<android.support.v4.widget.DrawerLayout   
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<Button
    android:id="@+id/popup"
    android:layout_width="1dp"
    android:layout_height="1dp"
    android:textSize="0dp"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true" />

<RelativeLayout
    android:id="@+id/principal"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
<FrameLayout
    android:id="@+id/fragment_container"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1" >
    <fragment
        class="es.DetailsFragment"
        android:id="@+id/details"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    </FrameLayout>
</RelativeLayout>
</LinearLayout>
<!-- Menú Deslizante -->
<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/cabecera_drawer"
    app:menu="@layout/menu_drawer" />
    </android.support.v4.widget.DrawerLayout>

My question is: How can I insert two fragments in the same tab?