html / css: align texts when there is another element before texts-CodePudding

I think this should be a simple html / css question, but I don't know how to put it in my words clearly. I am creating a responsive footer using React.js and I am not sure how to align texts when there is a icon before the texts. I am assuming that ** is the icon.

   <span className="info_box">
    ** &nbsp; Room 1234, 12/F, Modern Warehouse, 10 Shing Yip Street, Kwun
    Tong, Kowloon, Hong Kong
  </span>

whenever I resize the window, the text aligns with the icon instead of texts. I've tried display: wrap, inline, inline-block, flex but they did not work out. Any helps would be appreciated. The link to the code down below:

CodePudding user response：

import "./styles.css";

export default function App() {
  return (
    <>
      <span className="info_box">
        <i>**</i>
        <p>Room 1234, 12/F, Modern Warehouse, 10 Shing Yip Street, Kwun Tong, Kowloon, Hong Kong</p>
      </span>
    </>
  );
}

CSS

.info_box {display:flex;align-items:center;gap:8px;}
p {margin:0;padding:0;}

Output