collapsible LI heading cut off

collapsible LI heading cut off

The header in a collapsible LI is getting cut off. Is there a way to display the entire text ? Pls advice
In this example : This is option one click here

<ul  data-role="listview" data-inset="true" data-splittheme="e" data-spliticon="plus" >
        <li data-role="list-header" data-theme="e">Here is some info</li>
        <li>
           <div data-role="collapsible" data-collapsed="true" data-theme="d">
            <h5 style="white-space:pre-wrap;" >This is option one click here </h5>
            <p style="white-space:pre-wrap; font-size:medium ;">Turn off PCs, monitors, printers, and copiers nightly and on weekends. If unable to switch off the entire computer, turn off the monitor and printer</p>
           </div>
        </li>
        <li>
           <div data-role="collapsible" data-collapsed="true" data-theme="d">
            <h5 style="white-space:pre-wrap;" >This is option two click here </h5>
            <p style="white-space:pre-wrap;font-size:medium ;">Receive rebates, federal incentives, and financing options</p>
           </div>
        </li>
   </ul>