Yes that’s basically correct although you are overusing the divs a bit and your class names are a bit specific as left-section may not be the left section when it is vertical. Also naming the container flex-container is a bit silly because you may find that a grid container is better at some later stage and then you’d have to change all the html. Just call it a container or fylo-container and don’t describe its css characteristics in its class name. Use class names that refer to the content rather than their position on the page (although sidebar is usually acceptable as it usually infers its not the main content).
Also simplify the padding if you can and apply to the main elements rather than each individual element although this is not always possible.
Avoid fixed widths at all costs. You set left to 350px and right to 700px so you would have been better setting a max-width of 1150px + gap on the main container and allow the items to scale smaller. You can then use flex to make one side twice as big as the other without using measurements. This also means that when you add the media query for smaller screens you can just change the display on the flex container and forget about changing the widths.
Use flex to centre your icons rather than fiddling with padding on each item. This saves code and makes them centre perfectly without trying.
I’ve updated the code into a forked codepen but left the right side for you to work on
Hope that helps but you are working in the right direction so well done so far