I'm facing a challenge in creating floating divs, just like illustrated in the image provided in the link below. Currently, I am employing the float left property to align all the divs next to each other.
The first picture displays the default layout of the divs.
Upon clicking on a div, its height increases - similar to what is shown in the second image where the third div appears directly below the first one without disrupting the other divs. In the third picture, following the same pattern as the second image, when we click on the second div, the fourth div should move to the bottom without disturbing the adjacent divs. While the initial three images show four divs, it's important to note that the number of divs can vary. The fourth picture illustrates only three divs and depicts that upon clicking on the first div, the third div shifts to the right side. This behavior remains consistent even when there are five or seven divs. My question is related to achieving this functionality using CSS. How can I accomplish this task?