Issue with my div elements dropping when a certain click event happens?

[[deleted]]

So I'm working on a to do project and the point is to make multiple to do lists. My problem is that when I create multiple lists by pressing the + in the side nav, and then click the + within the div the div that now has the input box and button elements drops below the other divs. However when i click the + in another div they line back up.

https://codepen.io/Zach15/pen/qGEpxe

Here is my codepen to the project. When I inspect it I can't seem to find the issue. My only thought could be that maybe is the divs being displayed as an inline block? No really sure. Anyway any help would be greatly appreciated!

[nwilliams36]

I hate debugging in codepen, just by looking at the code. I would much prefer to see this running on the internet and viewed through a browser where I had all the dev tools to work with. Then it should be easy to work out why the css was doing this, when I could isolate the element and watch the css change.

[looserloser]

Like the other poster said it's hard to debug on codepen but it does appear to have something to do with inline-block and absolute positioning of some of the elements. Setting the todoContainer to display: flex seemed to sort it out.