different flex behavior in firefox and chrome

Question

i use of display:flex for styling, it styles elements correctly in chrome, but disrupts in fire fox.

1. my firefox version:99.0.1
2. chrome version: 100.0.4896.127 (Official Build) (64-bit).

my main problem: why this behavior differently in FF & CHROME? How fix that in FF, that also do not disrupt for CHROME?

.vendor-profile-pins__flag,
.vendor-profile-pins__location-pin {
  display: flex;
}

.vendor-profile-pins__flag>img,
.vendor-profile-pins__location-pin>img {
  margin-left: 6px;
}

.vendor-profile-pins {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

<div class='vendor-profile-pins'>
  <div class='vendor-profile-pins__flag'>
    <img src="{{url('/images/icons/vendorPage/dash-flag.svg')}}" alt='dash-flag'>
    <span> گزارش این صفحه به ما </span>
  </div>
  <div class='vendor-profile-pins__location-pin'>
    <img src="{{url('/images/icons/vendorPage/pin-alt.svg')}}" alt='pin-alt'>
    <span> از تهران، تهران </span>
  </div>
</div>

result in chrome( desired, ok!):

bad result in firefoxe( two texts, goes(flows, drops) in second line):

Answer 1

MY answer: i resolved this problem by this way:

i wrote width:16px; style for both <img> tags and resolved!

my mean of "resolved" is this: in FF browser, like chrome, two texts, do not over flowed to second line.

but the thing that is important, is this:

in FF, the browser, increases the width of <img> tag, and for this reason, the text of <span> tag, over flows to second line!

but the Chrome, remains width of <img> tag and the width of <span> take width of it's text content(do not need to overflow it's text to second line).

solution in html codes: insert style of width:16px; to <img> tag:

 <img style='width:16px;' src="{{url('/images/icons/vendorPage/dash-flag.svg')}}" alt='dash-flag'>