What is the solution for this scenario

[Hamza-Noah]

I am having this design and there are many row the second row is having cells more than the other ones on the left side which makes the width of the right cells of the second row less than the rest rows

I am trying to find a solution for this problem especially that there are two cases for this rows there are details could be show when clicking the button on the right side of the row so creating another arrow button won’t be allowed for me

what I want now is

I want to find a solution for the second row a solution which will make the first 5 cells of the second row same width as rest rows

please if you know how to guide me with this I will be so thankful for your help

one thing I have to clarify I do not have a prototype for this page I have built it based on other prototype pages and the UX/UI designer asked me to find a solution

[kevinSmith]

What language is this in? Is this a web app? Are you using any libraries or frameworks? There are multiple ways to build a table like this, what have you been using?

[bradtaniguchi]

Due to how it looks like each individual row is its own element, and its not directly related to each other row, you could do nothing and this would be an acceptable UI pattern.

However, if you wanted to “scale” each row according to each your looking at more of a “table” layout, rather than a list of cards. This would mean updating all the other rows to “expand” to the same width as the largest row. This would usually is a waste of space, and wont make sense if you keep the current UI, where each row is its own card.