<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="row"> <div class="col-md-3"> <div class="FAQ" id="accordion2Primary"> <div ><h4>API Product</h4> <div> <p class="title"> <a data-parent="#accordion2Primary" href="#collapse2api1" > What is your greatest strength? </a> </p> </div> <div id="collapse2api1" class="accordion-body collapse" style="height: 0px;"> </div> </div> <div > <div> <p class="p-title"> <a data-parent="#accordion2Primary" href="#collapse2api2" > How should a page of FAQs be titled? </a> </p> </div> <div id="collapse2api2" class="accordion-body collapse" > </div> </div> <div > <div> <p class="p-title"> <a data-toggle="collapse" data-parent="#accordion2Primary" href="#collapse2api3"> How should questions for FAQs be formatted? </a> </p> </div> <div id="collapse2api3" class="accordion-body collapse" aria-expanded="false"> </div> </div> <div > <div> <p class="p-title"> <a data-parent="#accordion2Primary" href="#collapse2api4"> Where can I find a good example of an FAQ? </a> </p> </div> <div id="collapse2api4" class="accordion-body collapse" aria-expanded="false"> </div> </div> <div > <div> <p class="p-title"> <a data-toggle="collapse" data-parent="#accordion2Primary" href="#collapse2api5" > How do I gain access to your free PDFs? </a> </p> </div> <div id="collapse2api5" class="accordion-body collapse" aria-expanded="false"> </div> <div> <p> <a href="#" > <strong>View More</strong> </a> </p> </div> </div> </div> </div> <div class="col-md-3" id="right-panel" > <div class="FAQ" id="accordion2Tertiary"> <div ><h4>Security</h4> <div> <p class="p-title"> <a data-toggle="collapse" data-parent="#accordion2Tertiary" href="#collapse2sec1" > Accordion Title 1 </a> </p> </div> <div id="collapse2sec1" class="accordion-body collapse" aria-expanded="false"> </div> </div> <div > <div> <p class="p-title"> <a data-parent="#accordion2Tertiary" href="#collapse2sec2"> Accordion Title 2 </a> </p> </div> <div id="collapse2sec2" class="accordion-body collapse"> </div> </div> <div > <div> <p class="p-title"> <a data-parent="#accordion2Tertiary" href="#collapse2sec3"> Accordion Title 3 </a> </p> </div> <div id="collapse2sec3" class="accordion-body collapse"> </div> </div> <div > <div> <p class="p-title"> <a data-parent="#accordion2Tertiary" href="#collapse2sec4"> Accordion Title 4 </a> </p> </div> <div id="collapse2sec4" class="accordion-body collapse"> </div> </div> <div > <div> <p class="p-title"> <a data-parent="#accordion2Tertiary" href="#collapse2sec5"> Accordion Title 5 </a> </p> </div> <div id="collapse2sec5" class="accordion-body collapse"> </div> <div> <p> <a href="#" > <strong>View More</strong> </a> </p> </div> </div> </div> </div> </div> <!--end of 1st Accordian -->

h4{ white-space:nowrap; margin-bottom:25px; } #right-panel{ padding-left:200px; } .p-title{ white-space:nowrap; }