I'm having a hard time figuring out how to center an icon next to wrapped text with text-wrap: balance so both are centered as a group within container?
It seems flexbox can't account for the wrapping of the text and I end up with a the icon pushed to the far left and the text centered in the remaining space.
I'm trying to use flexbox as the order of the items needs to be changed at different breakpoints.
How can I solve this issue?
.container { max-width: 800px; margin: 0 auto; background: #f3f3f3; padding: 30px; display: flex; justify-content: center;}.icon { width: 100px; height: 100px; background: #ccc;}.col-text { text-wrap: balance;}.row { display: flex; gap: 32px;}<div class="container"><div class="row"><div class="col-icon"><div class="icon"></div></div><div class="col-text"><p>Culpa magna incididunt nostrud labore veniam amet velit. Sint consequat id quis non magna elit amet consectetur. Culpa magna incididunt nostrud labore veniam amet velit. Sint consequat id quis non magna elit amet consectetur.</p></div></div></div>