I’m not 100% sure how you want it to behave, it’s hard to tell from static image. Could you share a gif or perhaps editor link? A screenshot from the responsive editor could also help.
Often, these things are caused by elements having a minimum width that’s too wide. When you resize the page, one element “refuses” to shrink, and it pushes the next one down a row. Another common cause is the alignment, such as giving an icon that’s supposed to stay along the right edge a left alignment. It will try to preserve the space between them, and move down a row.
Hope that was understandable, responsive issues are a bit hard to describe in writing.
There’s no reason to check “Wrap to previous line…” if the elements are already on the same line. That is normally used to align two elements that are placed on top of each other in the editor, so that the bottom one joins the top one if the user widens the screen. For example, say you fill out an online form on mobile, you have different inpt fields, one on top of the other. If someone visits that site on desktop, you may want those fields to be next to each other instead, to use the screen width more efficiently.
The problem in your case seems to be the text. It helps to see the elements as elastic, and remember the word fixed in margin: as the text is fixed width, it’s not elastic at all, and the margins are fixed. In other words, Bubble attempts to maintain the fixed margin on both sides and keep the size of the text static. There are two ways you can solve this. One is to remove the fixed width and experiment with a minimum width percentage that keeps the text readable. The second is to keep the text at fixed width, but place it within a group that’s not fixed width. That way, the group is the elastic part, and allows Bubble to squeese or stretch is to keep the elements on one line.