Bootstrap вложенный коллапс с cols дает неравномерное выравнивание

Question

У меня есть Bootstrap страница, где есть несколько сверток элементов, вложенных друг в друга

<div class='row container-fluid'>
 <div class='col-md-5'>
   <div class="form-group">
      <label for="loans" class='float-left'>1.Member
      <span class='btn openCollaspseButton' id ='collapseMemberBtn' data-toggle="collapse" href="#collapseMember" role="button" aria-expanded="true" aria-controls="collapseMember">
         <i class="fa fa-minus-circle text-warning"></i>
      </span>
      </label>
   </div>
 </div>
 <div class='col-md-3'>
    <div class="form-group">
      <input type="text" class="form-control" id="players" name="players" placeholder="" readonly data-toggle="tooltip" data-placement="top" title="Total no of players">
    </div>
 </div>
 <div class='col'>
    <div class="form-group">
       <input type="text" class="form-control"  id="prevplayers" name="prevplayers" readonly='readonly' value=415533>
    </div>
 </div>
 <div class='col'>
    <div class="form-group">
       <input type="text" class="form-control text-success"  id="pctplayers" name="pctplayers" readonly='readonly' value='12.56'>
    </div>
 </div>
 <div class="w-100"></div>
 <div class="collapse row collapserow show" id="collapseMember">
    <div class='col-md-5'>
       <div class="form-group">
       <label for="male" class='float-left'>i)Male</label>
       <span class='btn openCollaspseButton' id ='collapseMaleBtn' data-toggle="collapse" href="#collapseMale" role="button" aria-expanded="true" aria-controls="collapseMale">
          <i class="fa fa-minus-circle text-warning"></i>
       </span>
       </div>
   </div>
 <div class='col-md-3'>
    <div class="form-group">
       <input type="text" class="form-control" id="male" name="male"  placeholder="" readonly='readonly'>
    </div>
 </div>
 <div class='col previousFigure'>
    <div class="form-group">
     <input type="text" class="form-control " id="prevmale" name="prevmale"  readonly='readonly' value=415533>
    </div>
</div>
<div class='col percentDiff'>
   <div class="form-group">
      <input type="text" class="form-control text-success " id="pctmale" name="pctmale"  readonly='readonly' value='12.56'>
   </div>
</div>
<div class="w-100"></div>
<div class="collapse row  collapserow show" id="collapseMale">
<div class='col-md-5'>
   <div class="form-group">
      <label for="citizen" class='float-left '>i.i)Citizen</label>
      <span class='btn openCollaspseButton' id ='collapsecitizenBtn' data-toggle="collapse" href="#collapsecitizen" role="button" aria-expanded="true" aria-controls="collapsecitizen">
         <i class="fa fa-minus-circle text-warning"></i>
      </span>
   </div>
</div>
<div class='col-md-3'>
   <div class="form-group">
      <input type="text" class="form-control"  id="citizen" name="citizen"  placeholder="" data-toggle="tooltip" data-placement="top" title="Interbank loans comprise those loans any other bank/deposit-taker(resident or nonresident)" readonly='readonly'>
   </div>
</div>
<div class='col previousFigure'>
   <div class="form-group">
      <input type="text" class="form-control  " id="prevcitizen" name="prevcitizen"  readonly='readonly' value=415533>
   </div>
</div>
<div class='col'>
   <div class="form-group">
      <input type="text" class="form-control text-success percentDiff" id="pctcitizen" name="pctcitizen"  readonly='readonly' value='12.56'>
   </div>
</div>
<div class="w-100"></div>
<div class="collapse row  collapserow show" id="collapsecitizen">
<div class='col-md-5'>
   <div class="form-group">
      <label for="resident_i_i_i" class='float-left '>i.i.i)Resident</label>
   </div>
</div>
<div class='col-md-3'>
   <div class="form-group">
      <input type="text" class="form-control" id="resident_i_i_i" name="resident_i_i_i" placeholder=""  data-toggle="tooltip" data-placement="top" title="Banks/Branches operating in India">
   </div>
</div>
<div class='col previousFigure'>
   <div class="form-group">
      <input type="text" class="form-control " id="prevResident_i_i_i" name="prevResident_i_i_i" readonly='readonly' value=415533>
   </div>
</div>
<div class='col'>
   <div class="form-group">
      <input type="text" class="form-control text-success percentDiff" id="pctResident_i_i_i" name="pctResident_i_i_i" readonly='readonly' value='12.56'>
   </div>
</div>
<div class="w-100"></div>
<div class='col-md-5'>
   <div class="form-group">
      <label for="non_resident_i_i_ii" class='float-left '>i.i.ii)Non-Resident</label>
   </div>
</div>
<div class='col-md-3'>
   <div class="form-group">
      <input type="text" class="form-control" id="non_resident_i_i_ii" name="non_resident_i_i_ii" placeholder="" data-toggle="tooltip" data-placement="top" title="Banks/Branches operating outside India">
   </div>
</div>
<div class='col previousFigure'>
   <div class="form-group">
      <input type="text" class="form-control " id="prevNon_resident_i_i_ii" name="prevNon_resident_i_i_ii" readonly='readonly' value=415533>
   </div>
</div>
<div class='col'>
   <div class="form-group">
      <input type="text" class="form-control text-success percentDiff" id="pctNon_resident_i_i_ii" name="pctNon_resident_i_i_ii" readonly='readonly' value='12.56'>
   </div>
</div>
<div class="w-100"></div>
</div>
<div class='col-md-5'>
   <div class="form-group">
      <label for="non_citizen" class='float-left '>i.ii)Non Citizen</label>
      <span class='btn openCollaspseButton' id ='collapseNonCitizenBtn' data-toggle="collapse" href="#collapseNonCitizen" role="button" aria-expanded="true" aria-controls="collapseNonCitizen">
         <i class="fa fa-minus-circle text-warning"></i>
      </span>
   </div>
</div>
<div class='col-md-3'>
   <div class="form-group">
      <input type="text" class="form-control" id="non_citizen" name="non_citizen" placeholder=""  readonly='readonly'>
   </div>
</div>
<div class='col'>
   <div class="form-group">
      <input type="text" class="form-control previousFigure" id="prevnon_citizen" name="prevnon_citizen" readonly='readonly' value=415533>
   </div>
</div>
<div class='col'>
   <div class="form-group">
      <input type="text" class="form-control text-success percentDiff" id="prevnon_citizen" name="prevnon_citizen" readonly='readonly' value='12.56'>
   </div>
</div>
<div class="w-100"></div>
<div class="collapse row container-fluid collapserow show" id="collapseNonCitizen">
<div class='col-md-5'>
   <div class="form-group">
      <label for="asian" class='float-left '>i.ii.i)Asian</label>
      <span class='btn openCollaspseButton' id ='collapseAsianBtn' data-toggle="collapse" href="#collapseAsian" role="button" aria-expanded="true" aria-controls="collapseAsian">
         <i class="fa fa-minus-circle text-warning"></i>
      </span>
   </div>
</div>
<div class='col-md-3'>
   <div class="form-group">
      <input type="text" class="form-control" id="asian" name="asian" placeholder=""  readonly='readonly'>
   </div>
</div>
<div class='col'>
   <div class="form-group">
      <input type="text" class="form-control previousFigure" id="prevasian" name="prevasian"  readonly='readonly' value=415533>
   </div>
</div>
<div class='col'>
   <div class="form-group">
      <input type="text" class="form-control text-success percentDiff" id="pctasian" name="pctasian"  readonly='readonly' value='12.56'>
   </div>
</div>
<div class="w-100"></div>
<div class="collapse row container-fluid collapserow show" id="collapseAsian">
<div class='col-md-5'>
   <div class="form-group">
      <label for="china" class='float-left '>i.ii.i.i)China</label>
   </div>
</div>
<div class='col-md-3'>
   <div class="form-group">
      <input type="text" class="form-control" id="china" name="china" placeholder="" >
   </div>
</div>
<div class='col'>
   <div class="form-group">
      <input type="text" class="form-control previousFigure" id="prevchina" name="prevchina" readonly='readonly' value=415533>
   </div>
</div>
<div class='col'>
   <div class="form-group">
      <input type="text" class="form-control text-success percentDiff" id="pctchina" name="pctchina" readonly='readonly' value='12.56'>
   </div>
</div>
<div class="w-100"></div>
<div class='col-md-5'>
   <div class="form-group">
      <label for="japan" class='float-left '>i.ii.i.ii)Japan</label>
   </div>
</div>
<div class='col-md-3'>
   <div class="form-group">
      <input type="text" class="form-control" id="japan" name="japan" placeholder="" data-toggle="tooltip" data-placement="top" title="Japan.">
   </div>
</div>
<div class='col'>
   <div class="form-group">
      <input type="text" class="form-control previousFigure" id="prevjapan" name="prevjapan" readonly='readonly' value=415533>
   </div>
</div>
<div class='col'>
   <div class="form-group">
      <input type="text" class="form-control text-success percentDiff" id="prevjapan" name="prevjapan" readonly='readonly' value='12.56'>
   </div>
</div>
<div class="w-100"></div>
<div class='col-md-5'>
   <div class="form-group">
      <label for="korea" class='float-left '>i.ii.i.iii)Korea</label>
   </div>
</div>
<div class='col-md-3'>
   <div class="form-group">
      <input type="text" class="form-control" id="korea" name="korea" placeholder="" data-toggle="tooltip" data-placement="top" title="Korea">
   </div>
</div>
<div class='col'>
   <div class="form-group">
      <input type="text" class="form-control previousFigure" id="prevkorea" name="prevkorea" readonly='readonly' value=415533>
   </div>
</div>
<div class='col'>
   <div class="form-group">
      <input type="text" class="form-control text-success percentDiff" id="pctkorea" name="pctkorea" readonly='readonly' value='12.56'>
   </div>
</div>
<div class="w-100"></div>
<div class='col-md-5'>
   <div class="form-group">
      <label for="mongolia" class='float-left '>i.ii.i.iv)Mongolia</label>
   </div>
</div>
<div class='col-md-3'>
   <div class="form-group">
      <input type="text" class="form-control" id="mongolia" name="mongolia" placeholder="" data-toggle="tooltip" data-placement="top" title="Mongolia.">
   </div>
</div>
<div class='col'>
   <div class="form-group">
      <input type="text" class="form-control previousFigure" id="prevmongolia" name="prevmongolia" readonly='readonly' value=415533>
   </div>
</div>
<div class='col'>
   <div class="form-group">
      <input type="text" class="form-control text-success percentDiff" id="pctmongolia" name="pctmongolia" readonly='readonly' value='12.56'>
   </div>
</div>
<div class="w-100"></div>

<div class='col-md-5'>
   <div class="form-group">
      <label for="singapore" class='float-left '>i.ii.i.v)Singapore</label>
   </div>
</div>
<div class='col-md-3'>
   <div class="form-group">
      <input type="text" class="form-control" id="singapore" name="singapore" placeholder="" >
   </div>
</div>
<div class='col'>
   <div class="form-group">
      <input type="text" class="form-control previousFigure" id="prevsingapore" name="prevsingapore" readonly='readonly' value=415533>
   </div>
</div>
<div class='col'>
   <div class="form-group">
      <input type="text" class="form-control text-success percentDiff" id="pctsingapore" name="pctsingapore" readonly='readonly' value='12.56'>
   </div>
</div>
<div class="w-100"></div>
</div>
<div class='col-md-5'>
   <div class="form-group">
      <label for="nonAsian" class='float-left '>i.ii.ii)Non-Asian</label>
   </div>
</div>
<div class='col-md-3'>
   <div class="form-group">
      <input type="text" class="form-control" id="nonAsian" name="nonAsian" placeholder="" >
   </div>
</div>
<div class='col'>
   <div class="form-group">
      <input type="text" class="form-control previousFigure" id="prevnonAsian" name="prevnonAsian" readonly='readonly' value=415533>
   </div>
</div>
<div class='col'>
   <div class="form-group">
      <input type="text" class="form-control text-success percentDiff" id="pctnonAsian" name="pctnonAsian" readonly='readonly' value='12.56'>
   </div>
</div>
<div class="w-100"></div>
</div>
</div>
<div class='col-md-5'>
   <div class="form-group">
      <label for="female" class='float-left '>ii)Female</label>
   </div>
</div>
<div class='col-md-3'>
   <div class="form-group">
      <input type="text" class="form-control" id="female" name="female" placeholder="" data-toggle="tooltip" data-placement="top" title="Female Player.">
   </div>
</div>
<div class='col'>
   <div class="form-group">
      <input type="text" class="form-control previousFigure" id="prevfemale" name="prevfemale" readonly='readonly' value=415533>
   </div>
</div>
<div class='col'>
   <div class="form-group">
      <input type="text" class="form-control text-success percentDiff" id="pctfemale" name="pctfemale" readonly='readonly' value='12.56'>
   </div>
</div>
<div class="w-100"></div>
</div>
</div>

Проблема заключается в том, что входные элементы выровнены по вертикали (внутренние свернуть переместилось дальше вправо от родителя свернуть )

Как это исправить что все поля формы выровнены правильно?

Фрагмент кода: https://jsfiddle.net/v2pu14yw/2