So basically I have this situation:
There is a "big" container1 that renders two different containers ("rows"), both 100% width.What I'm trying to achieve is to align vertically the item of container2 with the first item of container3. In other words, I'd like to align the two dropdown menus' centers, making the first dropdown's center on the vertical blue line I drew.I can't seem to achieve this through flexbox and I'm trying not to resort to grid, but I have the feeling that it's impossible to do this with flexbox since the two items are into two different containers.
For now my css is :
.container1 { margin-top: 7%; margin-bottom: 7%; margin-left: 5%; margin-right: 5%; display: flex; flex-direction: column; row-gap: 30px; justify-content: center; align-items: center; flex-wrap: nowrap;} .container2 { width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;}.container3 { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: nowrap;}I shall also add that the two dropdown items have styling to have the description centered with the dropdown menu, so changing justify-content: space-between to justify-content-flex-start in container3 won't give any benefit.