I have tables structured from DIVs (using Tailwind):
I am adding inline editing - essential replacing the table-row which is wrapped in a <turbo-frame> with a form and the intent was to maintain the layout:
Except the form / turbo-frame breaks the table row structure for the new form elements. I tried applying the table-row CSS to the form but that doesn't work. I think there must be a simple CSS trick here but I am stumped.
Here is a JSFiddle of the code for both pictured here:
https://jsfiddle.net/jasper502/apyf08kx/22/
I will note that in reality there is some extra Rails Turbo frame elements in here - I have stripped them and will start with getting this plain HTML to work first. I will sort out the CSS to make the form cells look right after the row are sorted out.