I realize this is a tall order. I have a list, each row containing 2 columns. The first column's content comes from a database and can be text and/or html. The second column is a form field. The width is determined by the size of the field in the database. So, the first column is auto and the second column is the width of the textbox. I can determine the width of the second column but not the first. I want the first column to be all the same width (ie the width of the widest cell in the column). The second column will be all the same width, filled with the textbox. If the combination of the 2 columns' width is greater than the screen width I want the columns to wrap (thereby creating only 1 column). The whole thing is built in PHP, server side so Javascript is out of the question. I'm looking for a strictly CSS solution. I've looked at grid but I'm not that great at it and so far I can't find a solution.
can you set up an example somewhere like codepen? I am not a CSS person at all, but I'd start with something like this and let people mess with it. That way you can show them what you normal situation is. When you say the second column is defined by the size of the field what do you mean? var 100 is 100px? text is 500px? or are you using em? percent?
Can you give us some example HTML to play with? My point was that your description was really unclear.
Lists don't have rows, they have items. It sounds like your columnar relationships are semantic, in which case TABLE may in fact be the correct markup for this. But without seeing a sample of your data it's hard to say what the correct HTML would actually be. Content dictates markup, content + markup + device/user limitations dictates style. You've not shown us the data, or what you have for proper semantic markup, so we can't provide you with any CSS. If you're 100% certain this is not tabular data, then display:flex or display:grid might be in order.