twitter bootstrap - Get Collapsible div on the same line as <li> -

on 1 of company's websites have copyright notice @ bottom , want put pipe character collapsible div our refund policy. works refund policy collapsible div keeps showing below copyright. how can on same line? code:

<section id="footer">     <div class="container inline-block">         <ul class="copyright">             <li>&copy; @datetime.now.year.tostring() securities training corporation. rights reserved. |                      <div class="panel-group">                 <div class="panel panel-default">                      <div class="panel-title">                           <a data-toggle="collapse" href="#collapse1">refund policy</a>                      </div>                      <div id="collapse1" class="panel-collapse collapse">                           <table border="0" cellpadding="2" cellspacing="0" style="width: 580px" font-size="12">                                <tr>                                    <td>                                        <br />                                             <span>this our refund policy in collapsible div                                    </td>                                </tr>                           </table>                                 </div>                  </div>                  </div>              </li>         </ul>     </div> </section> 

there more code irrelevant. put container in same li tag. of course want collapsible title on same line copywrite.

you'll need start making panel element inline-block (or give explicit width). selector i'd use target css be:

#footer .copyright .panel-group {} 

demo

note i've taken width off policy table. (not sure why you're using table layout anyway.) also, if you're using list footer, put individual information nodes in individual list items or don't use list. it's confusing screen-reader users otherwise.

improved demo