Last try to get some help..

Question

Been screaming for 4hours-
Help with div alignment

Click the add(+) icon and enter a name. Then add a small div (+) icon and enter random data.
When the new div is created it lowers from its place.
Can anyone help me with that?
https://code.sololearn.com/W5R6ph5J3KX3/?ref=app

Update: I have given up for now. If you can solve the issue please let me know. Good night.

Answer 1

one solution is to add to your box class

vertical-align: bottom;

https://stackoverflow.com/questions/13548168/why-my-inline-block-divs-are-not-aligned-when-only-one-of-them-has-text

Answer 2

Debug your boxes you creating when the add function is executed, You will see it is not an fault is your javascript.
The box you creating is a div.
Therefore div must create a new line as parent or child.
So lets take a look at your CSS.
The box has an display of inline-block.
There is your mistake.
Remove that line and adjust the width and all will function normal.
Hope this helps👍
https://code.sololearn.com/WsXio73UPWoW/?ref=app

Answer 3

Akib Reza tbh it took me a while to figure it out as well 😅

Answer 4

Shouldn't line 64 be

main_sec.appendChild(book_row);

Instead of

main_sec.insertBefore(book_row,main_sec.firstChild);
?

or am i missing the question intent?

Answer 5

thanks a lot Burey. It was bugging me for a long time🦂

Answer 6

No, not that. Once i have a row and try to add another div to the right its mis-aligns.

Edit: see this screenshot

https://nofile.io/f/o2WHXQjtn4k/Screenshot_20181014-230235.png