How to insert an image + text hyperlink inside a html paragraph?

I have the following setup:

  <div id="readme">
    <div id="title-container">
      <div id="readme-title">
        <b>some text</b>
      </div>
      <img src="...">
    </div>
    <div id="content-container">
      <h1>some text</h1>
      <p class="text-content">some text</p>
      <h1>some text</h1>
      <div class="heading-container">
        <h2>some text</h2>
        <p class="date">some text</p>
      </div>
      <p class="text-content">some text</p>
        <a href="..." class="redirect">
          <span class="redirect-image"></span>
          <span class="read-more">Read more...</span>
        </a>
    </div>
  </div>
  <div id="preload-redirect-hover"></div>

#readme {
    margin-top: 13.5svh;
    margin-bottom: 15px;
    width: 650px;
    background-color: #353954;
    border: solid;
    border-radius: 10px;
}

#title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-bottom: solid;
    font-size: 1em;

    img {
        display: block;
        height: 24px;
    }
}

#content-container {
    padding: 10px 15px;

    h1 {
        width: 100%;
        margin: 0; /* remove browser's default margin */
        font-size: 1.5em;
        color: #f9b17a;
        border-bottom: solid black 3px;
    }
}

.text-content {
    width: 100%;
    margin: 0; /* remove browser's default margin */
    padding: 5px 0px; /* add spacing between the lines */
    font-size: 1.1em;
    color: #d0daec;
    line-height: 1.3;
}

.heading-container {
    display: flex;
    width: 100%;
    margin: 0px auto;
    padding: 10px 0px;
    align-items: center;
    justify-content: space-between;
    border-bottom: solid 2px;

    .date {
        white-space: nowrap;
    }

    h2 {
        width: fit-content;
        font-size: 1.1em;
        margin: 0; /* remove browser's default margin */
        color: #f0f0F9;
        border: none;
    }

    p {
        margin: 0; /* remove browser's default margin */
        font-size: 1em;
        color: #f0f0F9;
    }
}

.redirect {
    display: flex;
    width: fit-content;
    text-decoration-color: #f9b17a;

    .redirect-image {
        height: 24px;
        width: 24px;
        background: url("../media/readme/redirect.png");
        background-size: cover;
    }

    .read-more {
        place-content: center;
        color: #f9b17a;
    }
}

.redirect:hover {
    text-decoration-color: white;

    .redirect-image {
        background: url("...");
        background-size: cover;
    }

    .read-more {
        color: white;
    }
}

#preload-redirect-hover {
    width: 0px;
    height: 0px;
    background: url("...");
}

This is the result

My question is - is it possible to have the hyperlink (the redirect image + text) on the same line as the text in the paragraph and how? Thank you in advance!

I tried inserting the hyperlink in the paragraph, adding no-wrap css but these did not work.

Edit: Updated the html + css to be more concrete as one of the answers seems to work on its own, but not for me.

Move the link inside the paragraph and remove the flex setting

.redirect {
  text-decoration-color: #f9b17a;
}

.redirect-image {
  display: inline-block;
  vertical-align: bottom;
  height: 24px;
  width: 24px;
  background: url("https://picsum.photos/id/23/300/300");
  background-size: cover;
}

.read-more {
  color: #f9b17a;
}

<p>
  some text....
  <a href="#" class="redirect">
        <span class="redirect-image"></span>
        <span class="read-more">Read more...</span>
    </a>
</p>