I am trying to correctly align h2 and dropdown in mobile, using display flex. When the dropdown comes close to the h2, it will awkwardly get down, as shown in the images. How can can I make h2 flow down gracefully?
h2{ /* tried to break the h2 to h2 flow down gracefully */ overflow-wrap: break-word; word-break: break-word; white-space: normal;}#filterOptions { /* div contain h2 and dropdown */ display: flex; overflow: scroll; flex-direction: row; flex-wrap: wrap; justify-content: space-around;}#menuStructure { /* main div */ display:flex; flex-direction:column;}
HTML:
<h2>Menu:</h2><!-- to collect menu response--><div id="menuStructure"></div><section class="menu"></section><!-- to populate the user experince--><section class="usersExperience"></section> <script>//just category append js (not complete) if (menu) { const categoryHTML = Array.from({ length: count }).map((_, index) => { const categoryName = categoryList[index].replace(/[^a-zA-Z0-9]/g, '_'); return `<div id="${categoryName}" class="${categoryName}"><h2 style="flex-grow:1; order:2; flex-shrink: 1;">${categoryName}</h2> <img src="pizza-svgrepo-com_1_nrw83g.svg" width="30" height="30" class="${categoryName}-category style="flex-grow:3; order:1;" /></div>`; }).join(''); const styleC = document.createElement('style'); styleC.innerHTML =Array.from({ length: count }).map((_, index) => { const categoryNamee = categoryList[index].replace(/[^a-zA-Z0-9]/g, '_'); return ` .${categoryNamee}{ display: flex; flex-direction: row-reverse; flex-wrap: wrap; } `; }).join(''); </script>