HTML -Output Alignment

<style type='text/css'> .nxn-ret-table{width:100%;
border-collapse:collapse; font-family: Arial;} .nxn-ret-table th{ background:
C4B899;} /*  Define the background color for all the ODD background rows  */
.nxn-ret-table tr:nth-child(odd){ background: #DAE0E1;} /*  Define the
background color for all the EVEN background rows  */ .nxn-ret-table
tr:nth-child(even){background: #f7f7f7 } pre { font-family: Arial;overflow:
auto;background-color:powderblue;} </style>
<div class="container">
      <table class="table table-bordered">
        <tr class="header" class="accordion-toggle"  data-toggle="collapse"
data-target="#collapseOne">
          <td colspan="2">System Resource Utilization</td>
        </tr>
        <tr id="collapseOne" class="collapse in">
            <td colspan="2" style="padding:0;">
                <table class="table table-condensed nxn-mar-bot-0">
                    <tr>
                        <td>CPU</td>
                        <td bgcolor="#aad977"> <a name="C3" id="C3parent" onclick="myFunction(this.id)" href="#C3" target="_self" >Green </a></td>
<div id="C3" style="display: none"> <pre>Average:        all      0.04
0.00      0.08      0.02      0.00     99.85</pre>
<br></div>
                    </tr>
                    <tr>
                      <td>Memory</td>
                        <td><td bgcolor="#aad977">Green</td></td>
                    </tr>
                    <tr>
                      <td>Swap</td>
                        <td><td bgcolor="#aad977">Green</td></td>
                    </tr>
                    <tr>
                         <td>Defunct Process</td>
                         <td><td bgcolor="#aad977">Green</td></td>
                    </tr>
                    <tr>

                      <td>System Load Average</td>
                        <td><td bgcolor="#aad977">Green</td></td>

                    </tr>
                </table>
            </td>
        </tr>
        <tr class="header" class="accordion-toggle"  data-toggle="collapse" data-target="#collapseTwo">
          <td colspan="2">Header 2</td>
        </tr>
        <tr id="collapseTwo" class="collapse in">
            <td colspan="2" style="padding:0;">
                <table class="table table-condensed nxn-mar-bot-0">
                    <tr>
                      <td>data</td>
                      <td>data</td>
                    </tr>
                    <tr>
                      <td>data</td>
                      <td>data</td>
                    </tr>
                </table>
            </td>
        </tr>
      </table>
    </div>
        <script>
function myFunction(id) {
                var y = document.getElementById(id).name;
    var x = document.getElementById(y);
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }

}
</script>

Select allOpen in new window

When i run the above HTML ..i get the output
Screenhsot attached (Output-1)

when i click the hyperlink Green corresponds to CPU.it gives the output screenshot attached --Output-2

but i want the out put below the Hyperlink Green as attached in screenshot Output-3
Output-1.PNG
Output-2.PNG
Output--3.jpg