How to make the script adaptive depending on the number of elements in a row?

Question

css

https://jsfiddle.net/c55fauu8/
I am making a script, following the example , but now I froze at the moment when I don’t understand how to make it adequately reproduce with 2 lines, since the first element opens with slideDown, when you click on the subsequent ones, it changes with fadeOut & fadeIn, I want to do what if an element opens from another line so that it opens with slideDown, and closes from the previous line with slideUP.
Also, on mobile devices, I want to make sure that there is 1 element per line, and information about it is opened immediately below it, I understand that I can do it with a crutch through display: none, but I want to understand how to do it correctly, and not like an idiot

Answer 1

Check the size of the parent, calculate the sizes of the previous elements = determine the string. Or Calculate offsetTop for the first and your element to determine if it's not on the first line.