right alignment of the content - html

Question

When user click on any of the option(showOSpackage1,showOSPackage2), i want the content to be displayed on the right hand side. Right now when user click on showOSPackage1, the content is displayed on right side and even occupied the area on left side(table is displayed). Any inputs how can i make the content only visible on right side when user click on an option.
Please find the demo http://plnkr.co/edit/npfC9EiLtBMQCDs4M2I9?p=preview
sample code:
<div ng-controller="MainCtrl">
<div class="row">
<div class="vertical-menu;col-sm-3" style="width:20%;float:left;">
<a ng-click="toggle='ShowOsPackage1'" ng-class="{ 'active' : toggle === 'ShowOsPackage1' }">
showOsPackage1
</a>
<a ng-click="toggle='ShowOsPackage2'" ng-class="{ 'active' : toggle === 'ShowOsPackage2' }">
showOsPackage2
</a>
</div>
<div class="" ng-show="toggle === 'ShowOsPackage3'">
<h1>ShowOsPackage3</h1>
</div>
<div class="" ng-show="toggle === 'ShowOsPackage2'">
<h1>ShowOsPackage2</h1>
</div>
<div class="" ng-show="toggle === 'ShowOsPackage1'">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-primary">
<div>
<h2 style="text-align: center;">Table shown here</h2>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-1"> </div>
<div class="col-xs-8" style="width:80%;background: none;height: 660px;">
<table class="table table-scroll table-striped">
<thead>
<tr style="background-color: #cdd0d6;">
<th style="width:25%;white-space: nowrap;text-align: center;">Header1</th>
<th style="width:10%;white-space: nowrap;text-align: center;">Header1</th>
<th style="width:10%;white-space: nowrap;text-align: center;">Header3 </th>
</tr>
</thead>
<tbody style="width:95%;height:200px;overflow:auto;display:block;">
<tr>
<td style="width:25%;text-align: center;">
HEADER1 CONTENT
<td style="width:10%;text-align: center; ">
header2 content
</td>
<td style="width:10%;text-align: center;">
header3 content
</td>
</tr>
<tr>
<td style="width:25%;text-align: center;">
HEADER1 CONTENT
<td style="width:10%;text-align: center; ">
header2 content
</td>

Answer 1

try adding this css :
.options{
width: 20%;
float: left;
margin-top: 30px;
}
.colcontent {
width: 80%;
float: right;
}
Plus is your plnkr bootstrap isn't applied.