Different form styles in jquery-mobile

HTML

<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.css">
<div data-role="page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <ul data-role="listview" data-inset="true" style="width:50%;">
            <li data-role="fieldcontain">
              <label for="fname">First Name:</label>
              <input type="text" name="fname" id="fname" value=""    /> 
            </li>
            <li data-role="fieldcontain">
                <label for="mi">MI:</label>
                <input type="text" name="mi" id="mi" value="" />                
            </li>
        </ul>
        <ul data-role="listview" data-inset="true" style="width:30%;">
            <li>
              <label for="fname" class="fullWidthLabel">First Name:</label>
              <input type="text" name="fname" id="fname" value=""    /> 
            </li>
            <li>
                <label for="mi" class="fullWidthLabel">MI:</label>
                <input type="text" name="mi" id="mi" value="" />                
            </li>
        </ul>
        <p>Below one looks perfect to me</p>
        <ul data-role="listview" data-inset="true" style="width:70%;">
            <li data-role="list-divider"> Form </li>
            <li>
              <input type="text" name="fname" id="fname" value=""  placeholder="First name" style="width:30%;"/> 
            </li>
            <li>
                <input type="text" name="mi" id="mi" value="" placeholder="MI"  />                
            </li>
        </ul>
        
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

CSS

label.fullWidthLabel {
    width:100%:
}