Interactive Comments Section

This was a awesome challenge. The first problem I faced was the line for the indented comments / replies. At first I did this by simply adding a extra div with a border on the left. That worked until I started getting the layout to work on the desktop version, I could not get spacing on the left of the line. I managed to solve this by switching the nested replies to a flex container where I have 1 div which has the line and another div which holds the replies themself.

Then the second problem appeared this was the vote button switching from the bottom to the side as well as the action buttons going to the top when trying to implement the layout for desktop from mobile. The comment layout was based on flexbox but I found that this was not suiting so I moved to a grid layout. I learned that you can add specific gaps for both rows and columns which came in really handy.

Any advice is welcome. (I am trying my best on using correct semantic HTML)