How to increase width according to the col width in row?

Hello sir,
My view is below…
image

My view page
ion-scroll direction=“xy” zooming=“true” on-scroll=“scrollMirror(‘list’, ‘head’)” delegate-handle=“list”
div class=“item row row-item acs-width” ng-repeat="x in accountStatmentList.accountStatementNodes ">
div class=“col-left acs-slno”>{{x.slNo}}
div class=“col-left col-sep acs-date-amout”>{{ x.transactionDate}}
div class=“col-right col-sep acs-date-amout”>{{x.debtAmount}}
div class=“col-right col-sep acs-date-amout”>{{ x.creditAmount }}

{{ x.balance }}

{{ x.naration}}
    </div>
 

  </ion-scroll>

I wan auto fit with content like table cell width;
Please Help me…

may this is what you search for https://css-tricks.com/snippets/css/a-guide-to-flexbox/