I am working on this page https://www.wintherbikes.com/safety-features/ and as you can see, the black titles next to the numbers in the right column are being broken into more lines (especially visible on smaller screens). The second line is no longer aligned and moves the the left.
The number in front of the title is set to display: inline-block
The text below the title is set to display: block
You need to wrap the .safety-title-first and .safety-text-first elements in a container element. Then set display:flex on the parent p element. That way, two columns will be created, and the text will not flow below the .safety-number-first element.
I am a bit confused. I placed the title and text inside a div (which places the title and text below the number) and set the display to flex. which indeed creates two columns. On the left the title and on the right the text. But I need two rows and they need to be next to the number.
Great, I’m glad you found a solution. I did take a quick peak at your site just before my wife went into labour. The reason my flexbox suggestion didn’t work was because the div element you used to wrap the text was placed outside of the p tag. The WordPress editor may have auto-formatted things that way (it does do that sometimes). Just FYI!
