JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

<div data-role="page">
<div data-role="content">
<div data-role="collapsible-set">
    <div data-role="collapsible">
        <h3>My header with lots of text that gets truncated when viewing on mobile device or small screen.</h3>       
        <fieldset data-role="controlgroup">
            Controlgroup
        </fieldset>
    </div>
</div>
</div>

CSS

.ui-mobile .ui-page .ui-content .ui-collapsible .ui-collapsible-heading .ui-btn-text {
    white-space : normal;
}